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

您的问题有两种方法。

您可以使用ng-checked =＆＃34; checkSelected（item.id）＆＃34;来调用函数。在函数中传递id。然后在控制器中将其与{{1}的id进行比较} array并返回与数组匹配的id
您可以直接在ng-checked指令中编写条件（仅当您的数据不是太大时才适用。）您可以在此处找到有关此方法的更多信息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-model将负责选择或不选择复选框

如果您确实需要一个包含所选类别的对象，您也可以这样做：

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

在角度js中绑定多个复选框

2 个答案: