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

Binding checkboxes to object values in AngularJs

本文关键字：对象 AngularJs 复选框 绑定      更新时间：2023-09-26

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

.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/

如何解决这个问题？

将 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

当 JSON 不完全在您的控制范围内时，您将获得一个原始数组而不是一个对象。你想对同一个人做一个ng重复。

将 ng-repeats 绑定到复选框到基元数组并获取所选项。请参阅此处的 plunker 代码。

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

相关文章：