Wie man ng-model an ng-checked Boxen bindet

Question

Ich habe ein Problem bindenden Angular ng-check zu ng-Modell, das ist ng-Modell erkennt nicht den ausgewählten Zustand meiner Kontrollkästchen.

Hier ist eine Beschreibung (Es ist eine viel größere Code-Basis, aber ich habe zugeschnitten, um Code zu minimieren).

Auf Seite Last in JavaScript initialisieren ich meine Produkte und legen Sie die Standardwerte:

$scope.products = {} 
$scope.SetProductsData = function() { 
    var allProducts; 
    allProducts = [ 
     { 
     id: 1, 
     name: "Book", 
     selected: true 
     }, { 
     id: 2, 
     name: "Toy", 
     selected: true 
     }, { 
     id: 3, 
     name: "Phone", 
     selected: true 
     }] 

ich eine Master-Steuerung in meiner Ansicht, die ein Kontrollkästchen für je 3 Produkte (Buch, Spielzeug und Telefon) Liste : Diese sind standardmäßig aktiviert

<div style="float:left" ng-init="allProducts.products = {}" > 
    <div ng-repeat="p in Data.products"> 
     <div style="font-size: smaller"> 
      <label><input id="divPlatorm" ng-model="products[p.name]" ng-init="products[p.name] = true" type="checkbox"/> 
       {{p.name}}</label> 
     </div> 
    </div> 
</div> 

Dann wird eine Tabelle, die die gleichen Produkte in Reihen wiederholt haben:

<div ng-repeat="line in lineProducts" ng-init="line.products = {}"> 
    <div id="sc-p-enc" ng-repeat="p in Data.products"> 
     <div id="sc-p-plat" style="font-size: smaller"> 
      <label id="pl-label"><input ng-checked="products[p.name]" ng-model="line.products[p.name]" ng-init="line.products[p.name] = true" type="checkbox"/>          
       {{p.name}}</label> 
     </div> 
    </div> 
</div> 

Wenn ich die Master-Produkte an-/abgebe, ändert sich das entsprechende Kontrollkästchen in den Zeilen. Also, wenn ich 100 Reihen mit (Buch, Spielzeug und Telefon) habe, kann ich das unkontrollierte Spielzeug sehen, wo alle Spielzeuge in den Reihen ungeprüft sind.

Wenn ich die Daten an meine Steuerung sende, kann ich immer noch alle Toys = true sehen, obwohl sie nicht markiert waren.

Wenn ich physisch in die Reihe gehe, dann deaktiviert jedes Spielzeug und die Daten an meine Steuerung Toys = False.

Wie kann ich den markierten Status des Kontrollkästchens ändern, wenn er über die Master-Kontrollkästchen gesteuert wird?

Ich habe das gefunden Post gefolgt hier, aber ich glaube nicht, dass dies mein Szenario gilt: AngularJS: ng-model not binding to ng-checked for checkboxes

Answer 1

Es scheint die ng-checked in der Tabelle products[p.name] verbindlich ist, die die ng-model in Ihrer Master-Steuerung in der Ansicht auch Bindend an. Die ng-model in Ihrer Tabelle ist jedoch an eine andere Eigenschaft gebunden, line.products[p.name].

Ich denke, Sie brauchen wahrscheinlich nicht ng-checked in der Tabelle, da jedes Element seine eigene ng-model hat. So können Sie Ihre Tabellenansicht ändern

<label id="pl-label"><input ng-model="line.products[p.name]" type="checkbox"/>{{p.name}}</label> 

und in der Steuerung, ändern Sie den entsprechenden Wert von line.products[p.name] jedesmal, wenn der Wert von products[p.name] geändert wird.

Answer 2

Wenn ich die Funktionalität verstehe, die Sie versuchen zu behandeln, könnte Ihnen folgendes helfen: fiddle. Hier ist der Code:

<div style="float:left" ng-app ng-init="products = [ 
    { 
    id: 1, 
    name: 'Book', 
    line: 'Books', 
    selected: true 
    }, { 
    id: 2, 
    name: 'Another Book', 
    line: 'Books', 
    selected: true 
    }, { 
    id: 3, 
    name: 'Toy', 
    line: 'Toys', 
    selected: false 
    }, { 
    id: 4, 
    name: 'Another Toy', 
    line: 'Toys', 
    selected: false 
    }, { 
    id: 5, 
    name: 'Phone', 
    selected: true 
    }];lineProducts = ['Toys', 'Books']" > 
<div style="float:left"> 
    <div ng-repeat="p in products"> 
     <div style="font-size: smaller"> 
      <label> 
       <input ng-model="p.selected" type="checkbox"/> 
       {{p.name}} 
      </label> 
     </div> 
    </div> 
</div> 
<div ng-repeat="line in lineProducts"> 
    {{line}} 
    <div ng-repeat="p in products | filter:line"> 
     <div style="font-size: smaller"> 
      <label> 
       <input ng-model="p.selected" type="checkbox"/>          
       {{p.name}} 
      </label> 
     </div> 
    </div> 
</div> 
</div> 

Auch warum haben Sie IDs in Ihrem HTML? Mit eckigen gibt es keine Notwendigkeit in ids, und wenn man bedenkt, dass sie innerhalb von ng-Wiederholungen sind, werden sie mehrdeutig und daher nutzlos sein.

Ich stimme auch mit Nikos über die Verwendung der ng-init.Ich habe es in meinem jsfiddle, weil ich faul bin, würde ich es nicht in dem Produktionscode verwende

Answer 3

ich dieses Problem selbst nur dadurch gelöst, mit „ng-init“ und „ng-geprüft“ ---

• ng-geprüft - ‚geprüft‘ das Kontrollkästchen als Form
• ng-init- geladen wurde mein Checkbox html Wert Attribut zum Modell

Es gibt einen Kommentar über die besagt, dass es nicht gut zu bedienen ng gebunden auf diese Weise, aber keine andere Lösung wurde bereitgestellt.

Hier ist ein Beispiel unter Verwendung von ng-select statt ng-geprüft:

<select ng-model="formData.country"> 
<option value="US" ng-init="formData.country='US'" ng-selected="true">United States</option> 
</select> 

Dies bindet "US" formData.country zu modellieren und wählt den Wert beim Laden der Seite.

Answer 4

Sie sollten ng-Modell verwenden, das Ihnen eine Zwei-Wege-Bindung bietet. Durch das Aktivieren und Deaktivieren des Werts wird der Wert von product.selected aktualisiert.