Question

我有一个复选框列表如下：

<div ng-repeat="formationType in formationTypeList">
  <label>
  <input type="checkbox" class="md-warn md-align-top-left"
    ng-model="formationSelection[$index]" 
    ng-true-value="{{formationType}}" 
    name="formationSelection[]">
    {{ formationType.nom }}
  </label>
</div>

正如您所见，此复选框已使用formationSelection[]数组中的值进行初始化。

当我勾选一些复选框时，此复选框的值将添加到该数组中。

formationTypeList包含一个对象列表，每个对象都附加到一个复选框。

在我的场景中，我第一次将formationSelection[]清空，所以当我检查一些复选框并发送表单时，该数组中的值将存储在数据库中，当我回复我的应用程序时，我想要看到我选中的复选框，所以我从数据库中填充了该数组的值，然后我可以看到那些被选中的。

我遇到的问题是，只有在formationSelection[]第一个元素或第一个，第二个元素或第一个，第二个和第三个元素中，但是当我有例如第二和第四个，他们没有被选中。

这是工作案例的掠夺者：

http://plnkr.co/edit/I7NK8Tkw3Rzwh1Zj2X78?p=preview

这是非工作案例的一个掠夺者：

http://plnkr.co/edit/82FDQlhTtd09scs9cCDz?p=preview

为什么我会遇到这种行为，我该如何解决？

Answer 1

保持formationSelection长度与formationTypeList相同，它会起作用。

$scope.formationSelection = (function(selection,list){
  var result = new Array(list.length);
  Array.prototype.map.call(selection,function(val,index){
    var pos = Array.prototype.map.call(list,function(v,i){
      return v.codeFormation;
    }).indexOf(val.codeFormation);
    result[pos] = val;
  });
  return result;
})($scope.formationSelection,$scope.formationTypeList);

Plunker here

绑定AngularJS中的复选框列表

1 个答案: