1

Mit der angularjs navite select-Direktive ist die Modellbindung nur eine Möglichkeit, während in ui-select dies immer eine Zwei-Wege-Bindung zu sein scheint.Angularjs: Wie man ui-select macht nur ein Weg Modell biding?

<ui-select ng-model="uiSelected.animal"> 

    <ui-select-match> 
      <span ng-bind="$select.selected.name"></span> 
    </ui-select-match> 

    <ui-select-choices repeat="animal in (animals | filter: $select.search) track by $index"> 
     <span ng-bind="animal.name"></span> 
    </ui-select-choices> 

</ui-select> 

Hier ist das Plunker mein Problem präsentiert:https://plnkr.co/edit/FkZsFcMrTveWjXR5HNyT?p=preview

Mein Problem:

Wie kann ich ui-select machen nur eine einfache Fahrt mit dem Modell abwartend, so dass wenn ich das gewählte scope model ändere, ist es nicht an die ui-select gebunden? Wenn ich neu formuliere: Wie mache ich ui-select wie angular native select?

Antwort

1

Möglicherweise müssen Sie dem Tier/Auto eine $ Uhr hinzufügen und das ausgewählte Objekt in einer anderen $ scope-Variable speichern. Ich sehe keinen anderen Weg, da ich Referenzen auf ein Objekt im Tier-Array ausgewählt habe.

Nutzung auf-Event auswählen:

on-select="onSelectCallback($item, $model)" 

einen Blick auf diese Plunker haben: https://plnkr.co/edit/Zcb9xlPm6TW7DFk1sjAO?p=preview

+0

Vielen Dank für die Anregung. Ich habe daran gedacht. Aber um ehrlich zu sein, ich habe das Gefühl, dass das ein bisschen dreckig ist. Da meine Modelle dynamisch in Zahlen erweitert werden können, wäre es großartig, wenn es eine bessere Möglichkeit gäbe, dies zu beheben. – ccostel

+0

Sorry ccostel, aber da du eine benutzerdefinierte Direktive verwendest (ui-select), befürchte ich, dass es nicht möglich ist, die Modellbindung zu ändern. ui-select bindet den ausgewählten Wert direkt an sein ng-model-Attribut. uiAusgewählt.Animalreferenzen für ein Element im Array $ scope.animals. Wenn sich das Objekt innerhalb des Arrays ändert, beeinflusst dies direkt das Objekt uiSelected.animal, da es sich nur um eine Referenz und nicht um eine Kopie des Objekts handelt. – Nils

3

Verwendung unidirektionale Bindung mit diesem,

{{::animal.name}} 
+0

Hmm Ich mag diesen einfachen Ansatz wirklich. Das Problem ist, dass meine Modelle weiterhin verknüpft bleiben und ich sie später an einen REST-Endpunkt senden muss. Gibt es eine Möglichkeit, diese unidirektionale Bindung nicht nur für die Ansicht, sondern auch für das Modell zu haben? – ccostel

+0

@ccostel Versuchen Sie, Ihren Gültigkeitsbereich zu isolieren. Überprüfen Sie diesen Artikel http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ – Vinay