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

Ich habe dies vor dem Stellen dieser Frage erwähnt.AngularJS: ng-Modell bindet nicht an ng-checked für Checkboxen

AngularJs doesn't bind ng-checked with ng-model

Wenn ng-checked zu true auf der html Seite ausgewertet wird, wird die ng-model nicht aktualisiert. Ich kann nicht ng-repeat wie in der obigen Frage vorgeschlagen, weil ich einige Styling für jedes Kontrollkästchen verwenden müssen.

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

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Um zu sehen, was ich will, bitte öffnen Sie die Konsole, und klicken Sie einfach auf Submit Taste. Bitte aktivieren Sie keine Kontrollkästchen.

Vielen Dank im Voraus!

Quelle

2013-05-17 Abilash

107

ngModel und ngChecked sind nicht dazu gedacht, zusammen verwendet zu werden.

ngChecked erwartet einen Ausdruck, also indem Sie sagen ng-checked="true", Sie sagen im Grunde, dass das Kontrollkästchen immer standardmäßig aktiviert ist.

Sie sollten einfach ngModel verwenden können, gebunden an eine boolesche Eigenschaft in Ihrem Modell. Wenn Sie etwas anderes wollen, dann müssen Sie entweder ngTrueValue und ngFalseValue (die nur Strings unterstützen) verwenden, oder schreiben Sie Ihre eigene Direktive.

Was genau versuchen Sie zu tun? Wenn Sie möchten, dass das erste Kontrollkästchen standardmäßig aktiviert ist, sollten Sie Ihr Modell ändern - item1: true,.

Bearbeiten: Sie müssen nicht Ihr Formular senden, um den aktuellen Zustand des Modells debuggen, BTW, können Sie einfach {{testModel}} in Ihrem HTML (oder <pre>{{testModel|json}}</pre>) dump. Auch Ihre ngModel Attribute können zu ng-model="testModel.item1" vereinfacht werden.

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

Quelle

2013-05-17 03:52:19 Langdon

'ng-checked' wird berechnet wahr durch einen Ausdruck.Um anzuzeigen, dass ng-model nicht verknüpft ist, habe ich True verwendet. Beim Aktivieren des Controllers möchte ich, dass alle Kontrollkästchen deaktiviert sind. Nach einer Ajax-Anfrage berechne ich das "ng-checked", um das Kontrollkästchen zu aktivieren. Dies ist, wenn mein 'ng-Modell' nicht aktualisiert wird. – Abilash

@Abilash Sie sollten 'ngChecked' nicht verwenden. Ihr Modell ist in Ordnung, Sie müssen nur 'testModel.item1 = true' in Ihrem Ajax-Callback setzen und dann' $ scope. $ Apply() 'aufrufen, um Ihre Ansicht zu aktualisieren. – Langdon

Wir haben gerade den Fehler gemacht, 'ng-checked' statt' ng-model' zu verwenden ... nie wieder! – g00glen00b

Sie können ng-Wert-wahr zu sagen Winkel verwenden, dass Ihr ng-Modell eine Zeichenfolge ist.

Ich kann nur arbeiten ng-true-Wert erhalten, wenn ich die zusätzlichen Anführungszeichen wie so hinzugefügt (wie in dem offiziellen Angular docs gezeigt - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)

ng-true-value="'1'"

Quelle

2015-04-07 11:08:49 JRT

Was könnten Sie tun, ist ng-repeat in der Weitergabe verwenden Wert von was auch immer Sie auf die ng-checked und von dort mit ng-class Iterieren, um Ihre Stile abhängig von dem Ergebnis anzuwenden.

Ich habe kürzlich etwas Ähnliches gemacht und es hat für mich funktioniert.

Quelle

2016-08-18 12:51:08 Scott

kann als in Deklarieren ng-init auch wahr bekommen

<!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 die erste One Wählen und auch hier wahr Gezeigte Objekt, falsch, flase

Quelle

2016-12-07 10:14:53

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

Antwort

Verwandte Themen