[英]Can't get bootstrap multiselect to work with angular
我正在嘗試使bootstrap multiselect小部件正常工作。 當我對所有選項進行硬編碼時,它會起作用,如下所示:
<select id="topic-select" multiple="multiple">
<option val='math'>math</option>
<option val='critical_reading'>critical reading</option>
<option val='writing'>writing</option>
</select>
$("#topic-select").multiselect({
includeSelectAllOption: true,
selectAllText: 'composite score',
allSelectedText: 'composite score',
selectAllNumber: false,
});
但是如果我嘗試用angular填充選項,像這樣:
<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
</select>
那么下拉窗口就會出現錯誤,並且不會顯示任何選項。
如果我刪除將其變成多選的JavaScript,那么它會顯示所有選項。
我看了一個類似的問題: angularjs-ng-repeat-in-bootstrap-multiselect-dropdown,但沒有運氣。
如果您要使用Bootstrap的功能,則實際上並不需要多選。 通過在下拉列表中填充選項並將其添加到ng-click的新列表中,可以在Angular中獲得相同的功能。
<span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
<a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
<li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
{{item.name}}
</li>
</ul>
</span>
並在控制器中:
$scope.addToFilter = function(item) {
if(item.selected == "undefined" || item.selected == false)
{
item.selected = true;
Filters.addToFilters(item);
}
else
{
Filters.removeFromFilters(item);
item.selected = false;
}
}
最后,有一個“過濾器”服務來存儲此列表並調用函數以在任何地方使用它。
嘗試這個:
<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>
而不是用angular填充選項,我只是使用香草javascript將它們添加到div中,如下所示:
var topicSelect = $("#topic-select");
for (var topicId in topicList) {
topicSelect[0].add(new Option(topicList[topicId], topicId));
}
現在一切正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.