javascript - 在 Angular js中绑定(bind)多个复选框

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

我认为你的 $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-model 将负责为您选择或不选择复选框

如果您确实需要一个具有选定类别的对象，您也可以这样做:

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