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

Question

我有一份图书清单，每本书都有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?，但这并不是我所需要的。预先感谢您的答复。

Answer 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单击中定义的方法selectRetailer，传递图书和零售商的值以及当前选定的值(true或false)。