How to handle checkboxlist in AngularJS in Add and Edit operation?

Question

I am new to AngularJS and facing one problem with multiple check-boxes. I have one registration form in which I have choices of colors which comes from database.

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

I am using below code to render checkbox in form.

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

Now, during add operation, checkboxes renders properly... But how to bind checkboxes with model so that I get an array of selected checkboxes?

Also during edit time, I need to pre-select checkboxes to display user's saved choices.

So how to achieve it?

Thanks in advance.

@DharemeshSolanki is that a typo shouldn't it be [ { ID:1, Name:"Red"} ...] — Nix
– Nix, Commented Apr 25, 2014 at 11:59
You can use this solution: stackoverflow.com/questions/20968170/… — Ivan Chernykh
– Ivan Chernykh, Commented Apr 25, 2014 at 12:04

Nix · Accepted Answer · 2014-04-25 12:01:25Z

0

I think most people would have used c as their model and then tied ng-model to some property on c. Then your list is really just 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;
}

answered Apr 25, 2014 at 12:01

Nix

58.8k31 gold badges154 silver badges206 bronze badges

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

Collectives™ on Stack Overflow

How to handle checkboxlist in AngularJS in Add and Edit operation?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related