在angular js中绑定多个复选框

Binding multiple checkboxes in angular js

本文关键字：复选框 绑定 angular js      更新时间：2023-09-30

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

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

感谢

我认为您的$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
});

您的问题有两种方法。

  1. 您可以用ng-checked="checkSelected（item.id）"调用函数。在函数中传递id。然后在控制器中将其与$scope.selected_category数组的id进行比较，并返回与该数组匹配的id
  2. 您可以直接在ng-checked指令中编写条件（只有当您的数据不太大时才适用）
相关文章：