AngularJS: Booleschen Wert an Optionsfeld binden, sodass das Modell beim Deaktivieren des Ereignisses auf false aktualisiert wird
In meiner AngularJS-Anwendung zeige ich Kontaktdaten in einem Raster an. Meine typischen Kontakte JSON sieht wie folgt aus ...
%Vor%Die letzte Eigenschaft 'default' ist eigentlich eine Optionsschaltfläche, deren Auswahl den ursprünglichen Standardwert des entsprechenden Kontakttyps in obigem JSON ändern sollte. Es kann einen Standard für jeden Kontakttyp geben, d. H. Wir können Optionsfelder basierend auf dem Kontakttyp gruppieren.
%Vor%Hinweis: Der obige Code ist nicht genau derselbe, aber ungefähr derselbe wie Es wird in einer benutzerdefinierten Grid-Komponente angezeigt.
Wenn ich jetzt meine Ansicht / Formularseite mit dem obigen JSON lade, wird der Funkstatus aller Kontakte korrekt angezeigt. Das Problem tritt nach dem Laden der Seite auf, wenn der Benutzer einen anderen Kontakt als Standard auswählt. Dies ändert den Modellwert des Standardwerts für einen neu ausgewählten Kontakt auf true, der Modellwert des ursprünglichen Standardkontakts bleibt jedoch weiterhin wahr, obwohl sich der Funkstatus zum Deaktivieren / Unscharfschalten ändert (weil sie den gleichen 'name' Wert haben).
Ich dachte, ich könnte eine Direktive schreiben, aber ich kann sie nicht im Ereignis "Radio On-Blur / Uncheck" auslösen.
Es gibt verschiedene Posts, die boolesche Werte an Radiobuttons binden, aber ich kann es in meinem Szenario nicht ausführen, da ich Modellwerte für einzelne Optionsfelder in einer Radiogruppe aktualisieren möchte. Sehen Sie, es gibt kein einzelnes Modell, das eine Radiogruppe darstellt.
3 Antworten
Ich denke, Sie sollten Ihr Design ändern, um contacts von contactTypes zu trennen und den Schlüssel als Standardkontakt im Kontakttyp zu speichern.
In Ihrem aktuellen Design gibt es doppelte Werte für default und das ist nicht die gewünschte Methode, mit radio zu arbeiten.
Sie html:
%Vor% Ich nehme an, dass der Schlüssel des Kontakts value ist, du könntest einen Id für deinen Kontakt verwenden.
WARUM du ng-value="true" deklarierst, entferne das bitte
Bitte verwenden Sie $scope.$apply() in Ihrem Wert ändernden Code
Wie etwas unter
%Vor%Und Sie müssen
name="{{contact.type}}"inname="contact.type{{$index}}"ändern, weil einige Typen denselben Namen haben.
Tags und Links angularjs angularjs-directive angularjs-scope radio radio-group