How to pre-populate and bind list of checkbox using AngularJS

Question

I have a list of books and each book has id, name, and list of retailers. What I would like to do is to load up a page where I can use checkboxes to select/unselect retailers. When the book edit page is first loaded, the full list of retailers (each with a checkbox) are shown and then those that are the existing retailers for the book are checked.

app.js
allRetailers = $resource('/api/retailers');
currentRetailers = $resource('/api/books/:bookId/retailers')

partial.html
<span ng-repeat="retailer in allRetailers">
    <input type='checkbox' value='{{retailer .id}}' ng-model="book.isExistingRetailer(retailer)" >{{retailer .name}}<br/>
</span>

Getting the full list of retailers and saving only the checked ones is not the problem. The problem I am having is pre-populate the checkboxes that are existing/current retailers.

I have looked at How do I bind to list of checkbox values with AngularJS? but it's not quite what I need. Thanks in advance to your replies.

@ArtyomPranovich, sorry I gave up half way trying to post it on JSfiddle. But I was able to get it working now. Problem was that I was not using callback and thus the existing retailers list was always empty. Thanks for your help nonetheless. — Bolto Cavolta
– Bolto Cavolta, Commented Feb 15, 2014 at 10:12

Chandermani · Accepted Answer · 2014-02-14 08:56:19Z

3

You should use the ng-checked directive like

<input type='checkbox' value='{{retailer.id}}' ng-checked="book.isExistingRetailer(retailer)" ng-model="selected" ng-click="selectRetailer(book, retailer,selected)>{{retailer .name}}<br/>

This would mean that you need to manually select the items on checked by implementing the method selectRetailer defined on ng-click passing in values for book and retailer and the current selected value(true or false).

answered Feb 14, 2014 at 8:56

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

1 Comment

Bolto Cavolta Over a year ago

Thanks, I now use the ng-checked and I also added callback for the existing retailer list (which was always empty). Works great now.

Collectives™ on Stack Overflow

How to pre-populate and bind list of checkbox using AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related