javascript - 如何在 ng-repeat 循环中初始化输入复选框的 ng-model

Question

我在创建多个 input[checkbox]es 时遇到了问题使用 ng-repeat 并附加 ng-model 的 Angular 项目列表:

<li ng-repeat="item in items"> 
  <a ng-href="#/{{item.id}}" > {{ item.id }} </a>
  <input type="checkbox" ng-model="selectedMessages[item.id]"/>
</li>

这里的问题是 selectedMessages[item.id] 仅在复选框被单击一次时初始化和设置。

这是必要的原因是我想用一个命令切换所有复选框，如下所示:

$scope.toggleCheckboxes = (state) ->
  for key, val of $scope.selectedMessages
    $scope.selectedMessages[key] = state  # true or false

假设我有 3 个复选框，点击 1 一次，点击 2 两次，点击 3 从不点击，那么上述对象将如下所示:

$scope.selectedMessages = {
    "1" : true,
    "2" : false
  }

很明显，$scope.toggleCheckboxes(true) 仅适用于那些复选框。

有没有好的方法来为多个复选框初始化这个 ng-model？

Answer 1

您可以使用 ng-init 来填充数组。我使用了 $index 而不是用 id 属性组成一堆数据......相应地调整你的代码

<input type="checkbox" 
     ng-model="selectedMessages[$index]"
     ng-init="selectedMessages[$index]=selectedMessages[$index]||false" />

JS

  $scope.selectedMessages=[];
  $scope.checkAll=function(){
    var msgs = $scope.selectedMessages
    msgs.forEach(function(elem, idx){
      msgs[idx] =true
    })
  }

DEMO