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

Question

在 angular 中使用 ng-repeat 为项目列表创建多个 input[checkbox]es 并附加 ng-model 时，我运行遇到了一个问题：

<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

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

How to initialize ng-model of input checkboxes in an ng-repeat loop

javascript

checkbox

coffeescript

angularjs