将复选框绑定到 AngularJs 中的对象值答案

【问题标题】：Binding checkboxes to object values in AngularJs将复选框绑定到 AngularJs 中的对象值
【发布时间】：2012-05-04 10:46:30
【问题描述】：

问题在于将复选框的状态（选中/未选中）绑定到对象值。

HTML：

<div ng:controller="Ctrl"> 
   <div ng:repeat="(letter, number) in obj">
     {{letter}} and {{number}}
     <input type="checkbox" ng:model="obj[letter]">
</div>

控制器：

function Ctrl() {
    this.obj = {a:true,b:true};    
};

当第一个复选框被点击时，它会影响第二个复选框的状态，但模型是正确的，所以 obj 变为 {a:false, b:true}。

可以在以下位置找到示例 http://jsfiddle.net/alexpetrov/tRxzr/

如何解决这个问题？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

将 ng-repeat 绑定到对象而不是原始类型。

function Ctrl() {
    this.obj = [{id: 'a', checked: true}, {id: 'b', checked: true}];
}

http://jsfiddle.net/tRxzr/1/

绑定到原始类型会混淆 ng-repeat，这是一个错误： https://github.com/angular/angular.js/issues/933

【讨论】：

好消息：这已在 9 月修复。

【解决方案2】：

当 JSON 不完全由您控制时，您将获得原始数组而不是对象。你想在同样的地方做一个 ng-repeat。

将 ng-repeats 绑定到原始数组的复选框并获取所选项目。在此处查看 plunker 代码。

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

【讨论】：