在angular js中绑定多个复选框答案

【问题标题】：Binding multiple checkboxes in angular js在angular js中绑定多个复选框
【发布时间】：2015-04-11 14:50:04
【问题描述】：

我有两个来自对象 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>

我不知道如何检查那些被选中的复选框。请帮忙！

谢谢

【问题讨论】：

将checked 属性添加到categories，然后使用它来管理已选中的未选中对象...

标签： javascript jquery angularjs

【解决方案1】：

您的问题有两种方法。

您可以使用 ng-checked="checkSelected(item.id)" 调用函数。在函数中传递 id。然后在控制器中将其与 $scope.selected_category 数组的 id 进行比较并返回匹配的 id数组
您可以直接在 ng-checked 指令中编写条件（这仅适用于您的数据不太大的情况）。您可以在此处找到有关此方法的更多信息example

【讨论】：

【解决方案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-model 将负责为您选择或不选择复选框

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

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

【讨论】：