Wie eine Liste von Kontrollkästchen in AngularJS binden

Question

Ich habe eine Liste von Kontrollkästchen, wie folgend:

formationSelection = [ 
{ 
    codeFormation: 1, 
    nom: "ENSA" 
}, 
{ 
    codeFormation: 2, 
    nom: "CPGE" 
} 
] 

In einem anderen Szenario:

<div flex="50" ng-repeat="formationType in formationTypeList"> 
      <md-checkbox class="md-warn md-align-top-left" 
         value="{{formationType.codeFormation}}" 
         name="formationSelection[]" 
         ng-checked="formationSelection.indexOf(formationType) > -1" 
         ng-click="toggleFormationTypeSelection(formationType)"> 
       {{ formationType.nom }} 
      </md-checkbox> 
      </div> 

Dies ist das Format von formationSelection, nachdem ich meine Form senden Ich möchte, wenn ich mein Formular öffne, um die Checkboxen zu markieren, die in einem Array wie folgt definiert sind:

das Objekt res.candidatureProjetProfessionnel.formations enthält diese:

formationSelection = [ 
{ 
    codeFormation: 1, 
    nom: "ENSA" 
}, 
{ 
    codeFormation: 2, 
    nom: "CPGE" 
} 
] 

Und wenn ich $scope.formationSelection inspizieren enthält er die Daten, die ich aus res.candidatureProjetProfessionnel.formations bekam:

Aber ich weiß nicht, warum sind meine Kontrollkästchen nicht einmal geprüft obwohl die $scope.formationSelection nicht leer ist.

Wie kann ich das lösen?

Answer 1

bin ich nicht sicher, was die md-checkbox Anweisung ist so, ich werde nur eine normale Checkbox-Eingabe verwenden. Im Allgemeinen beinhaltet einen Standardwert für Eingänge in Winkeleinstellung 2 Dinge:

• Stellen Sie sicher, Ihre Eingaben ng-model den Wert der Checkbox zu speichern und für 2-Wege-Datenbindung (so dass Sie es von der Steuerung einstellen ebenso)
• Setzen Sie in Ihrem Controller die im ng-Modell deklarierte Variable auf den von Ihnen gewünschten Standardwert.

So in Sie HTML:

<input type="checkbox" class="md-warn md-align-top-left" ng- 
model="formationSelection[$index]" ng-true-value="{{formationType}}" 
name="formationSelection[]"> 

Stellen Sie sicher, ng-true-value verwenden Sie den Wert jedes Kontrollkästchen, um zu erklären, wenn geprüft. Das ng-Modell ist auf formationSelection[$index] gesetzt, was im Grunde bedeutet, dass jedes Kontrollkästchen ein Element innerhalb des FormationSelection-Arrays ist. Auf diese Weise wird das Array die Sammlung der Werte aller überprüften Eingaben sein.

Jetzt sollten $scope.formationSelection = res.candidatureProjetProfessionnel.formations arbeiten

hier ein Arbeits Plunker: http://plnkr.co/edit/sGm39DRWH9EOReiiSrIl?p=preview

Answer 2

Sie müssen ng-model wie unten gezeigt verwenden. Es sollte ein Objekt wie $scope.data = {}; sein. Dies ist nur ein Beispiel, wo hoffen, dass Sie den Punkt bekommen und an Ihrem Szenario arbeiten können. Tatsächlich haben Sie einzelne Kontrollkästchen wie unten gezeigt, aber Werte werden durch die Schleife gesetzt. So können Sie dieses Konzept auch für Ihren Anwendungsfall anwenden. Das wird Ihnen helfen.

Html

<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1"> 
      Checkbox 1: {{ data.cb1 }} 
</md-checkbox> 

JS

$scope.data = {}; 
$scope.data.cb1 = true; 

spielen Sie mit ihm auf Codepen

Answer 3

Ich denke, dass Ihre Methode isFormation(formationType) über die Richtlinie ng-checked es das Ergebnis nicht zurück.

In Ihrem Controller eine Funktion

$scope.isFormation(_type){ 
    return $scope.formationSelection.filter(function(f){return f.nom === _type;}).length > 0; 
}