使用数组中的内容预先填充复选框?

时间:2013-06-05 19:19:23

标签: javascript angularjs checkbox angularjs-directive angularjs-scope

我有一个复选框,可以调用ng-click上插入checkedItems数组的函数。

如何使用checkedItems arrray?

中的元素预先填充此复选框

以下是我设置的相关摘要:

<div ng-repeat="c in c_list">
    <input type="checkbox" ng-click="checkSelection(c)"/> {{c}}
</div>
$scope.c_list_selected = []
$scope.checkSelection = function (item) {
    if ($scope.c_list_selected.indexOf(item) === -1) {
        $scope.c_list_selected.push(item);
    } else {
        $scope.c_list_selected.splice($scope.c_list_selected.lastIndexOf(item), 1);
    }
}

我尝试了ng-bindng-model和一些不同的ng-checked表达式。没有工作。

1 个答案:

答案 0 :(得分:0)

复选框绑定到布尔值。您必须构建checkedItems数组的映射(AKA集),如下所示:

$scope.checkedItemsSet = {};
c_list_selected.forEach(function(item) {
  $scope.checkedItemsSet[item] = true; // populate again
});
$scope.$watch(
  'checkedItemsSet',
  function(newV) {
    var k, v;
    angular.copy([], c_list_selected); // empty the list
    for (k in newV) { // populate again for truey attributes of the mapping
      v = newVal[k];
      if (v) {
        c_list_selected.push(parseInt(k)); // attribute names are indeed strings
      }
    }
  },
  true  // check changes by content instead of by object ID.
);

然后将每个复选框绑定到集合

中的相应项目
<input type="checkbox" ng-model="$scope.checkedItemsSet[c]"/>