在角度js中綁定多個複選框

Question

我有兩個數組來自web服務的對象。一個是所有類別和另一種是選擇的類別這樣

$scope.categories = [ 
    { "id": 1, "name": "cat1" }, 
    { "id": 2, "name": "cat2" },  
    { "id": 3, "name": "cat3" }, 
    { "id": 4, "name": "cat4" } 
]; 

$scope.selected_category = [ 
    { "id": 1, "name": "cat1" }, 
    { "id": 2, "name": "cat2" } 
]; 

和我的標記是這樣

<div class="form-group"> 
    <label>Category</label> 
    <div class="clr"></div> 
    <label class="checkbox-inline" ng-repeat="item in categories"> 
     <input type="checkbox" value="{{item.id}}" ng-model="?" ng-checked="?">   
     {{item.name}} 
    </label> 
</div> 

我想不通我怎麼檢查爲選擇哪個來了這些複選框。請幫忙！

謝謝

Answer 1

有兩種方法可以解決您的問題。

1. 您可以致電與NG-檢查=「checkSelected（item.id）」傳遞中的id function.Then在控制器中的功能比較這與$scope.selected_category陣列的ID，並返回這些ID的那個配合陣列
2. 可以在NG-檢查指令直接寫的條件（這僅適用於如果你的數據不是太大）。你可以找到更多關於這種方法在這裏example

Answer 2

我覺得你的$ scope.categories應該以這種方式更新：

$scope.categories = [ 
    { "id": 1, "name": "cat1", "isSelected": false }, 
    { "id": 2, "name": "cat2", "isSelected": false },  
    { "id": 3, "name": "cat3", "isSelected": false }, 
    { "id": 4, "name": "cat4", "isSelected": false } 
]; 

而使用它的方式：

<div class="form-group"> 
    <label>Category</label> 
    <div class="clr"></div> 
    <label class="checkbox-inline" ng-repeat="item in categories"> 
    <input type="checkbox" value="{{item.id}}" ng-model="item.isSelected">   
    {{item.name}} 
    </label> 
</div> 

NG-模型將選擇的護理或不復選框您

如果你真的需要有一個對象有選擇的類別，你也可以這樣做：

$scope.$watch("categories", function(oldVal, newVal){ 
    //Create your object here 
});