AngularJS: ng-Modell bindet nicht an ng, aktiviert für Kontrollkästchen

80

Ich habe darauf hingewiesen, bevor ich diese Frage gestellt habe.

AngularJs bindet nicht ng-geprüft mit ng-model

Wenn auf der Seite ng-checkedausgewertet wird , wird das nicht aktualisiert. Ich kann nicht wie in der obigen Frage vorgeschlagen, da ich für jedes Kontrollkästchen ein Styling verwenden muss.truehtmlng-modelng-repeat

Hier ist der Plunker, den ich erstellt habe, um mein Problem zu veranschaulichen.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Um zu sehen, was ich will, öffne bitte die Konsole und klicke einfach auf die SubmitSchaltfläche. Bitte aktivieren Sie keine Kontrollkästchen.

Danke im Voraus!

angularjs angularjs-ng-model angularjs-ng-checked Abilash
quelle

Antworten:

122

ngModelund ngCheckedsollen nicht zusammen verwendet werden.

ngCheckederwartet einen Ausdruck. Wenn ng-checked="true"Sie also sagen, dass das Kontrollkästchen standardmäßig immer aktiviert ist.

Sie sollten in der Lage sein, nur ngModeleine boolesche Eigenschaft in Ihrem Modell zu verwenden. Wenn Sie etwas anderes möchten, müssen Sie entweder ngTrueValueund ngFalseValue(das derzeit nur Zeichenfolgen unterstützt) verwenden oder eine eigene Direktive schreiben.

Was genau versuchst du zu tun? Wenn Sie nur das erste Kontrollkästchen standardmäßig aktivieren möchten, sollten Sie Ihr Modell ändern - item1: true,.

Bearbeiten: Sie müssen Ihr Formular nicht senden, um den aktuellen Status des Modells zu debuggen. Übrigens können Sie es einfach {{testModel}}in Ihren HTML- Code (oder <pre>{{testModel|json}}</pre>) kopieren . Auch Ihre ngModelAttribute können vereinfacht werden ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

Langdon
quelle
ng-checkedwird durch einen Ausdruck zu true berechnet. Um anzuzeigen, dass ng-modelnicht verlinkt ist, habe ich dort true verwendet. Beim Starten des Controllers möchte ich, dass alle Kontrollkästchen deaktiviert sind. Nach einer Ajax-Anfrage berechne ich das, um das ng-checkedKontrollkästchen zu aktivieren. Dies ist, wenn mein ng-modelnicht aktualisiert wird.
Abilash
5
@Abilash Du solltest nicht benutzen ngChecked. Ihr Modell ist in Ordnung, Sie müssen nur testModel.item1 = trueIhren Ajax-Rückruf einstellen und dann anrufen $scope.$apply(), um Ihre Ansicht zu aktualisieren.
Langdon
2
Wir haben nur den Fehler gemacht, ng-checkedanstelle von ng-model... nie wieder zu verwenden!
g00glen00b
Gemäß dem Hinweis auf docs.angularjs.org/api/ng/directive/ngChecked "Beachten Sie, dass diese (ngChecked) Direktive nicht zusammen mit ngModel verwendet werden sollte, da dies zu unerwartetem Verhalten führen kann."
Abhijeet
@Langdon Ich war ungefähr Stunden lang mit diesem Problem beschäftigt. Ihr Hinweis $ scope. $ Apply () hat mein Problem behoben. Vielen Dank.
Nullzeiger
13

Sie können ng-value-true verwenden, um Angular mitzuteilen, dass Ihr ng-Modell eine Zeichenfolge ist.

Ich könnte ng-true-value nur zum Laufen bringen, wenn ich die zusätzlichen Anführungszeichen wie folgt hinzufüge (wie in den offiziellen Angular-Dokumenten gezeigt - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D ).

ng-true-value="'1'"
JRT
quelle
Danke, das war das Update für mich!
Jesper1
1

Was Sie tun können, ist die ng-repeatÜbergabe des Werts von allem, was Sie iterieren, an das ng-checkedund von dort aus ng-class, um Ihre Stile abhängig vom Ergebnis anzuwenden.

Ich habe kürzlich etwas Ähnliches gemacht und es hat bei mir funktioniert.

Scott
quelle
1

Kann deklarieren, wie das in ng-init auch wahr wird

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

Und Sie können das erste und das Objekt auswählen, das auch hier gezeigt wird: wahr, falsch, flase

Naveen Kumar
quelle
Es gibt nur wenige geeignete Verwendungen von ngInit. Diese Anweisung kann missbraucht werden, um Ihren Vorlagen unnötig viel Logik hinzuzufügen. Siehe AngularJS ng-init-Direktiven-API-Referenz .
Georgeawg
0

Die Anweisungen ng-modelund ng-checkedsollten nicht zusammen verwendet werden

Aus den Dokumenten:

ngChecked

Legt das ngCheckedmarkierte Attribut für das Element fest, wenn der darin enthaltene Ausdruck wahr ist.

Beachten Sie, dass diese Anweisung nicht zusammen mit verwendet werden solltengModel , da dies zu unerwartetem Verhalten führen kann.

- AngularJS ng-geprüfte Direktiven-API-Referenz

Stellen Sie stattdessen den gewünschten Anfangswert vom Controller ein:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
georgeawg
quelle
0

Sie brauchen nicht, ng-checkedwenn Sie verwenden ng-model. Wenn Sie CRUD in Ihrem HTML-Formular ausführen , erstellen CREATESie EDITwährend der Datenbindung einfach ein Modell für den Modus, das mit Ihrem Modus übereinstimmt :

CREATE-Modus: Modell nur mit Standardwerten

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

EDIT-Modus: Modell aus Datenbank

$scope.dataModel = getFromDatabaseWithSameStructure()

Unabhängig davon, ob EDIToder im CREATEModus, können Sie Ihre ng-modelSynchronisierung konsistent mit Ihrer Datenbank verwenden.

Antonio Ooi
quelle