使用Angular選中並取消選中複選框

在我的表單中，我在所有這些列中都有一個帶有複選框的表格。我有3 <tr>，每個<tr>都有其ng-repeate調用Web服務來顯示克隆（Json數據）。當我點擊複選框我產生一個JS數組使用此代碼記錄ID：使用Angular選中並取消選中複選框

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

而在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>

它的工作原理，但問題是，當我取消選中它不從js陣列中刪除的複選框

來源

2017-02-17 Sagiliste

嘿，也許[清單模型指令]（https://github.com/vitalets/checklist-model）可以幫助。 –

你是否嘗試過檢查...？，你的問題有點令人困惑，請張貼html太 – Sajan

我更喜歡找到一個沒有添加模塊的解決方案，謝謝 @Sajan它完成了，謝謝 – Sagiliste

我包含一個要從陣列中刪除的else部分： 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); 
      } 
     })

來源

2017-02-17 16:37:44

雖然埃弗頓的回答能夠完成任務，實在是有點多餘的檢查每一個複選框狀態改變時的陣列中的每個項目。你並不需要爲數組中的每一個項目進行更新。

下面是一個例子，其中只有這實際上切換對應的複選框，被添加或從employees.developers數組中刪除（注：沒有必要冗餘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); 
    } 
}

和如何使用此方法在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>

來源

2017-02-17 17:53:46

使用Angular選中並取消選中複選框

回答

相關問題