如何使用AngularJS预填充和绑定复选框列表

我有一本书的列表，每本书都有ID，名称和零售商列表。我想要做的是加载一个页面，我可以使用复选框来选择/取消选择零售商。首次加载图书编辑页面时，会显示完整的零售商列表（每个零售商都有一个复选框），然后检查该图书的现有零售商。如何使用AngularJS预填充和绑定复选框列表

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>

获得零售商的完整列表并保存只有选中的零售商不是问题。我遇到的问题是预先填充现有/当前零售商的复选框。

我看了看How do I bind to list of checkbox values with AngularJS?但它不是我所需要的。在此先感谢您的回复。

来源

2014-02-14 Bolto Cavolta

你能否提供JSfiddle/Plunker以获得更多理解？ –

@ArtyomPranovich，对不起，我放弃了试图在JSfiddle上发布它的一半。但我现在能够正常工作。问题是我没有使用回调，因此现有的零售商清单总是空的。尽管如此，感谢您的帮助。 –

您应该使用ng-checked指令像

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

这意味着你需要通过实现在价值传递的书，零售商和NG-点击定义的方法selectRetailer手动选择的检查项目当前选定的值（true或false）。

来源

2014-02-14 08:56:19 Chandermani

谢谢，我现在使用ng-checked，并且还为现有的零售商列表（总是空的）添加回调。现在效果很好。 –

如何使用AngularJS预填充和绑定复选框列表

回答

相关问题