Binding checkboxes to object values in AngularJs

Question

The problem is in binding the state of the checkbox (checked/unchecked) to the object values.

HTML:

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

Controller:

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

When the first checkbox is clicked it affects the state of the second checkbox, but the model is correct, so obj becomes {a:false, b:true}.

Example can be found at http://jsfiddle.net/alexpetrov/tRxzr/

How to fix this?

Vojta · Accepted Answer · 2012-05-04 11:29:47Z

6

Bind ng-repeat to objects rather than primitive types.

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

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

Binding to primitive types confuses ng-repeat, it's a bug: https://github.com/angular/angular.js/issues/933

answered May 4, 2012 at 11:29

Vojta

23k5 gold badges51 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Olson Over a year ago

Good news: this was fixed in September.

Rafi Ali Khan · Accepted Answer · 2013-12-18 20:30:25Z

0

When the JSON is not entirely in your control, you get a primitive array instead of an object. You want to do an ng-repeat on the same.

To bind ng-repeats to checkboxes to a primitive array and get the selected items. See the plunker code here.

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

answered Dec 18, 2013 at 20:30

Rafi Ali Khan

563 bronze badges

Collectives™ on Stack Overflow

Binding checkboxes to object values in AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related