Aktivieren und deaktivieren Sie Kontrollkästchen mit Angular

Question

In meinem Formular habe ich eine Tabelle mit Kontrollkästchen in allen diesen Spalten. Ich habe 3 <tr> und jeder <tr> hat seinen ng-repeate, der den Webservice aufruft, um die Klone (Json Daten) anzuzeigen. Wenn ich auf ein Kontrollkästchen klicken erstelle ich einen js Array, die ID mit diesem Code erfasst:

checkoptions (array, model) { 
angular.forEach(array, (value, key) => { 
    if (array[key].checked) { 
    model.push(array[key].id) 
    } 
}) 

Und in HTML:

<tr ng-repeat="developer in $ctrl.developers"> 
    <td>{{developer.label}}</td> 
    <td> 
     <input type="checkbox" id="{{developer.id}}" 
      ng-change="$ctrl.checkoptions($ctrl.developers,$ctrl.employees.developers)" 
      ng-model="developer.checked"> 
       <label for="{{developer.id}}"></label> 
    </td> 

Es funktioniert, aber das Problem ist, dass, wenn Ich deaktiviere ein Kontrollkästchen, das nicht aus dem Array js entfernt wird

Answer 1

Ich habe einen anderen Teil aus dem Array entfernt: http://jsfiddle.net/x9m1nqvp/1/

 $scope.checkoptions = function (array, model) { 
     angular.forEach(array, (value, key) => { 
      if (array[key].checked) { 
      var index = model.indexOf(array[key].id); 
      if(index == -1) 
       model.push(array[key].id) 
      } 
      else { 
      var index = model.indexOf(array[key].id); 
      if(index >=0) 
       model.splice(index, 1); 
      } 
     }) 

Answer 2

Während Everton Antwort die Arbeit erledigt wird, ist es ein wenig redundant jedes Element im Array überprüft, jedes Mal, wenn ein einzelnes Checkbox Zustand ändert. Sie müssen nicht wirklich für jedes einzelne Element im Array aktualisieren. Hier

ist ein Beispiel, wo nur das Kontrollkästchen, die tatsächlich umgeschaltet haben, hinzugefügt oder entfernt wird von dem employees.developers Array (Hinweis: keine Notwendigkeit für die redundanten angular.forEach):

$scope.checkoption = function (developer){ 
    if (developer.checked) { 
     var index = $scope.employees.developers.indexOf(developer.id); 
     if(index == -1) 
      $scope.employees.developers.push(developer.id) 
    } else { 
     var index = $scope.employees.developers.indexOf(developer.id); 
     if(index >=0) 
      $scope.employees.developers.splice(index, 1); 
    } 
} 

und wie diese genutzt wird in der html:

<tr ng-repeat="developer in developers"> 
    <td>{{developer.label}}</td> 
    <td> 
     <input type="checkbox" id="{{developer.id}}" 
      ng-change="checkoption(developer)" 
      ng-model="developer.checked"> 
     <label for="{{developer.id}}"></label> 
    </td> 
</tr>