如何在添加和编辑操作中处理 AngularJS 中的复选框列表？答案

【问题标题】：How to handle checkboxlist in AngularJS in Add and Edit operation?如何在添加和编辑操作中处理 AngularJS 中的复选框列表？
【发布时间】：2014-06-11 02:58:20
【问题描述】：

我是 AngularJS 的新手，面临一个问题，即多个复选框。我有一个注册表单，我可以在其中选择来自数据库的颜色。

$scope.ColorList = { { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }};

我正在使用下面的代码在表单中呈现复选框。

<tr>
  <td>Favorite Colors</td>
  <td>
     <label data-ng-repeat="c in item.ColorList">
        <input type="checkbox" value="{{c.ID}}" /><span>{{c.Name}}</span> 
     </label>
  </td>
</tr>

现在，在添加操作期间，复选框可以正确呈现...但是如何将复选框与模型绑定，以便获得一组选定的复选框？

同样在编辑期间，我需要预先选择复选框以显示用户保存的选择。

那么如何实现呢？

提前致谢。

【问题讨论】：

@DharemeshSolanki 是错字不应该是[ { ID:1, Name:"Red"} ...]
你可以使用这个解决方案：stackoverflow.com/questions/20968170/…

标签： angularjs

【解决方案1】：

我认为大多数人会使用c 作为他们的模型，然后将ng-model 绑定到c 上的某个属性。那么你的列表真的只是item.ColorList

$scope.ColorList = [ { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }];

<label data-ng-repeat="c in item.ColorList">
    <input type="checkbox" ng-model="c.Active" value="{{c.ID}}" /><span>{{c.Name}}</span> 
 </label>

$scope.getSelected = function(item){
     var results = [];
     angular.forEach(item.ColorList, function(c){
          if(c.Active){
              results.push(c);
          }
     });
     return results;
}

【讨论】：