javascript - 使用数组中的内容预填充复选框？

Question

我有一个复选框，它调用一个ng-click插入checkedItems数组的函数。

如何使用数组中的元素预填充此复选框checkedItems？

以下是我的设置中的相关片段：

<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-bind，ng-model还有几种不同的ng-checked表达方式。没有工作。

Answer 1

复选框绑定到布尔值。您必须构建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]"/>