Überprüfen Sie mehrere Kontrollkästchen von verschachtelten ng-Wiederholung in angularjs

Question

Ich habe $ scope.getmaindata Liste mit 5 Objekten, in jedem Objekt habe ich eine Liste enthalten mehrere Werte, die Benutzer erreicht. Und $ scope.myproviders enthalten Ebenen mit ID- und Level-Namen. Ich möchte die mehreren Werte jedes Benutzers prüfen, die diesem Dienst entsprechen, wenn id übereinstimmt. und wenn Benutzer Level 3 in seiner Liste haben, muss ich das Eingabefeld daneben anzeigen. Ich habe einige Antworten in stackoverflow versucht, aber keiner von ihnen löste mein Problem. Das Problem, das ich mit Code bekomme, ist, wenn die Levelqualifizierte Liste der einzelnen Benutzer nicht in der Reihenfolge ist, also dachte ich, ich muss eine For-Schleife schreiben und schrieb aber nicht gelungen. ist die Arbeits plunkr mit mehr Code Plunkr v1
aktualisieren
Die Werte zum ersten Mal mit $ scope Variablen verbindlich sind, aber wenn ich einige von ihnen deaktivieren levelsqualified Liste jeden Benutzers wird nicht
aktualisiert Plunkr v2

<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata"> 
     <ul class="list-inline"> 
     <h4>{{mydata.firstname}}</h4> 
     <li ng-repeat="providers in myproviders"> 
      <span> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList" 
       ng-checked="mydata.levelsqualified[$index]==providers.level"> 
        {{providers.level}} 
       </label> 
      </span> 
     </li> 
     <li> 
      <div class="required-field-block"> 
      <input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" /> 
      </div> 
     </li> 
     </ul> 
    </div> 

Answer 1

Ich glaube, dass Sie Ihre ng-checked ändern müssen (wenn ich Sie richtig verstehe).

<label class="checkbox-inline"> 
    <input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList" 
     ng-checked="mydata.levelsqualified[$index]"> 
      {{providers.level}} 
</label> 

und Sie müssen wie so ein ng-if für Ihr Eingabefeld hinzuzufügen:

<li ng-if="mydata.levelsqualified[$index]==3"> 
    <div class="required-field-block"> 
     <input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" /> 
    </div> 
</li> 

Ich hoffe, das ist das, was man braucht.

EDIT änderte ich die Plunker beide Antworten und ein wenig Hacking zu integrieren. Ich habe ein ng-change Event hinzugefügt und Ihre ng-model geändert. Siehe unten:

<li ng-repeat="providers in myproviders"> 
    <span> 
     <label class="checkbox-inline"> 
      <input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"> 
       {{providers.level}} 
     </label> 
    </span> 
</li> 
<li ng-if="mydata.levelsqualified.indexOf(3) > -1"> 
    <div class="required-field-block"> 
     <input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" /> 
    </div> 
</li> 

ich auch die folgende Funktion hinzugefügt:

$scope.addCheckChoice = function (c, p) { 
    var main = $scope.getmaindata.indexOf(c); 
    var idx = c.levelsqualified.indexOf(p.id); 
    if (c.selected === true) { 
     c.levelsqualified.push(p.id); 
     alert("You selected " + p.id + " for " + c.firstname); 
    } 
    else { 
     c.levelsqualified.splice(idx, 1); 

     alert("You removed " + p.id + " for " + c.firstname) 

    } 
    for (var i = 0; i < c.levelsqualified.length; i++) { 
     for(var x = 0; x < $scope.myproviders.length; x++){ 
      if (c.levelsqualified[i] == $scope.myproviders[x].id) { 
       c.selected = true; 
      } 
     } 
    } 

} 

Wenn dies nicht das, was Sie brauchen, lassen Sie es mich wissen. Sie müssen möglicherweise ein wenig optimieren.

Answer 2

Erweitern auf @Randi Radcliffs Plunker, this Plunker könnte den Trick tun.

Auf dem ng-geprüft gerade tat

ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"