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

【问题标题】：How to pre-populate and bind list of checkbox using AngularJS如何使用 AngularJS 预填充和绑定复选框列表
【发布时间】：2014-03-13 12:06:34
【问题描述】：

我有一个书籍清单，每本书都有 ID、名称和零售商列表。我想做的是加载一个页面，我可以在其中使用复选框来选择/取消选择零售商。首次加载图书编辑页面时，会显示完整的零售商列表（每个都带有一个复选框），然后检查图书的现有零售商。

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?，但这并不是我所需要的。提前感谢您的回复。

【问题讨论】：

能否提供 JSfiddle/Plunker 以加深理解？
@ArtyomPranovich，抱歉，我在尝试将其发布在 JSfiddle 上半途而废。但我现在能够让它工作。问题是我没有使用回调，因此现有的零售商列表总是空的。尽管如此，还是感谢您的帮助。

标签： angularjs rest checkbox binding

【解决方案1】：

您应该使用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-click 上定义的方法 selectRetailer 来手动选择选中的项目，传入书籍和零售商的值以及当前选择的值（true 或 false）。

【讨论】：

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