AngularJS：使用ngRepeat和ngModel有一個複選框導致所有複選框成爲選中

Question

我的HTML：

<div class="panel-body"> 

     <span ng-repeat="industry in ctrl.industryList"> 
     <label> 
     <input type="checkbox" id="industry" ng-model="ctrl.oneIndustry" ng-change="ctrl.updateSelected(industry)"> 
     {{industry}} 
     </label><br/> 
    </span> 
</div> 

我通過行業數組迭代和顯示覆選框。當勾選複選框時，它被存儲到一個數組中。如果複選框，然後取消選中，我想從數組中刪除：

我的控制器代碼：

vm.updateSelected = function (industry) { 
    if (vm.oneIndustry) { 

     vm.industries.push(industry) 
    } 
    else{ 
     vm.industries.pop(industry) 
    }} 

目前的問題是在點擊一個複選框時，所有在列表中的項目得到雖然只有被點擊的一次被保存，但被打勾。在不使用時，該項目將從列表中刪除，並且所有複選框都將被取消選中。我如何勾選和取消只勾選特定的複選框？

Answer 1

您不能使用多個複選框相同的靜態ng-model，你需要或者使用動態ng-model或一個重複陣列中分配一個值。這樣每個複選框都有自己獨立的模型。

您可以通過多種方式做到這一點：

1. 添加到您的重複陣列，使其具有這樣說，對象是否被選中與否陣列中的每個對象的值。要做到這一點，你可以像ng-model="industry.isSelected"那樣分配它。
2. 有一個單獨的對象，存儲bool是否選擇每個數組對象。要做到這一點，你會爲它分配像這樣ng-model="selection.industryIds[industry.id]"

在您的情況最好的選擇可能是第一位的，你也需要改變if語句以下，但：

vm.updateSelected = function (industry) { 
    if (industry.isSelected) { 
     vm.industries.push(industry) 
    } 
    else{ 
     vm.industries.pop(industry) 
    }} 

Answer 2

ngModel helper

ngModel，輸入shoulde是字符串。將可分配的AngularJS表達式綁定到數據。

AngularJS表達式的名稱應該不同。

<input type="checkbox" id="industry-one" ng-model="ctrl.oneIndustry"/>

<input type="checkbox" id="industry-two" ng-model="ctrl.twoIndustry"/>