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

Question 1

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!

Question 2

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

Question 3

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

Question 4

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.

Question 5

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

Question 6

Die Anweisungen `ng-model`und `ng-checked`sollten 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 };

Question 7

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.

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

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

ngChecked

CREATE-Modus: Modell nur mit Standardwerten

EDIT-Modus: Modell aus Datenbank

Die Anweisungen `ng-model`und `ng-checked`sollten nicht zusammen verwendet werden