如何使用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預填充和綁定複選框列表

回答

相關問題