Condizionale ng-model binding in angularjs

Ho un modello che è un array che deve gestire complesse e semplici elementi :

{
    "object" :[
               "element1.html",
               "element2.html",
               {
                   "url:"element3.html",
                   "title" : "Title 3"
               },
               "element4.html",
               "element5.html"
            ]
}

C’è qualche modo per fare una selezione in grado di gestire semplici e complessi elementi in angularjs (mostrando url complexs)?

Approccio 1

Voglio dire alcuni, come questo:

ng-model="(object[$index].url ? object[$index].url : object[$index])"

Approccio 2

Fare una normalizzato oggetto che avrà la struttura complessa per ogni oggetto con vuoto array e un tipo di file che indica se è semplice o complesso.

Potrei fare qualche magia con angolare per evitare il secondo approccio?

Grazie!



2 Replies
  1. 20

    Si potrebbe utilizzare ngSwitch o ngIf e posizionare l’elemento corretto quindi.

    Con ngIf per esempio:

    <input ngIf="object[$index].url" ngModel="object[$index].url">
    <input ngIf="!object[$index].url" ngModel="object[$index]">

    Se la condizione non è soddisfatta, angolare consente di rimuovere completamente l’elemento dom, fino a che la condizione di soddisfare.

    • Sembra che le sue condizioni sono mescolati.
  2. 14

    Utilizzando metodi getter e setter

    È possibile definire metodi getter e setter su un oggetto e mettere logica per recuperare/impostare qualsiasi altro oggetto che si voleva ottenere/modificare in modo condizionale.

    Angolare ha un ng-model-options="{getterSetter:true}" che è possibile utilizzare come segue:

    input(ng-model="data" ng-model-options="{getterSetter:true}")

    var data1 = "data 1";
    var data2 = "data 2";
    $scope.data = function(newVal) {
        if (condition) {
            if (angular.isDefined(newVal))
                data1 = newVal;
            return data1;
        } else {
            if (angular.isDefined(newVal))
                data2 = newVal;
            return data2;
        }
    };

    Tuttavia, e questo potrebbe essere solo nel mio caso, non solo non ha funzionato o meno come previsto.

    C’è anche il JavaScript predefinito modo per fare lo stesso utilizzando Object.defineProperty

    var data1 = "data 1";
    var data2 = "data 2";
    Object.defineProperty($scope, 'data', {
        get: function() {
            if(condition)
                return data1;
            else
                return data2;
        },
        set: function(newVal) {
            if(condition)
                data1 = newVal;
            else
                data2 = newVal;
        }
    });

    Di nuovo, questo potrebbe essere solo nel mio caso, ma utilizzando solo una di esse, non solo non ha funzionato o non ha funzionato come previsto. Così li ho usati tutti e due insieme, e funziona perfettamente.

    • Sarebbe davvero utile se ci fosse un getterSetter opzione per modelli di associazione delle direttive (in un due vie di associazione di dati) e non solo i campi che prendere un ng-model.

Lascia un commento