wake-up-neo.net

AngularJS: ng-model bindet nicht an ng-checked für Checkboxen

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

AngularJs bindet nicht ng-checked mit ng-model

Ob ng-checked wird auf der Seite true zu html gewertet, das ng-model wird nicht aktualisiert. Ich kann nicht ng-repeat wie in der obigen Frage vorgeschlagen, da ich für jedes Kontrollkästchen ein bestimmtes Styling verwenden muss.

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 Schaltfläche Submit. Bitte keine Checkboxen ankreuzen.

Danke im Voraus!

angularjsangularjs-ng-modelangularjs-ng-checked
77
Abilash

ngModel und ngChecked dürfen nicht zusammen verwendet werden.

ngChecked erwartet einen Ausdruck. Wenn Sie also ng-checked="true" sagen, wird das Kontrollkästchen standardmäßig immer aktiviert.

Sie sollten nur ngModel verwenden können, das an eine boolesche Eigenschaft Ihres Modells gebunden ist. Wenn Sie etwas anderes wollen, müssen Sie entweder ngTrueValue und ngFalseValue verwenden (die momentan nur Strings unterstützen) oder Ihre eigene Direktive schreiben.

Was genau versuchst du zu tun? Wenn Sie nur möchten, dass das erste Kontrollkästchen standardmäßig aktiviert ist, 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 einfach {{testModel}} In Ihren HTML-Code (oder <pre>{{testModel|json}}</pre>) Einfügen. Auch Ihre ngModel Attribute können zu ng-model="testModel.item1" Vereinfacht werden.

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

122
Langdon

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'"
11
JRT

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 auswählen und das Objekt, das auch hier gezeigt wird, wahr, falsch, falsch

1
Naveen Kumar

Was Sie tun könnten, ist ng-repeat Weitergabe des Werts dessen, was Sie wiederholen, an ng-checked und von dort mit ng-class, um Ihre Stile abhängig vom Ergebnis anzuwenden.

Ich habe in letzter Zeit etwas Ähnliches gemacht und es hat bei mir funktioniert.

1
Scott

Das ng-model und ng-checked Direktiven sollten nicht zusammen verwendet werden

Aus den Dokumenten:

ngChecked

Legt das aktivierte Attribut für das Element fest, wenn der Ausdruck in ngChecked wahr ist.

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

- AngularJS ng-checked Direktive API Reference

Stellen Sie stattdessen den gewünschten Anfangswert über die Steuerung 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 };
0
georgeawg