1

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.

Community
  • 1
  • 1
Bolto Cavolta
  • 413
  • 1
  • 8
  • 16
  • Can you provide JSfiddle/Plunker for more understanding? – Artyom Pranovich Feb 14 '14 at 08:23
  • @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 Feb 15 '14 at 10:12

1 Answers1

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

Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • Thanks, I now use the ng-checked and I also added callback for the existing retailer list (which was always empty). Works great now. – Bolto Cavolta Feb 15 '14 at 10:13