Невозможно получить загрузочный многосегмент для работы с угловым

Question

Я пытаюсь заставить виджет загрузочного мультиселекта работать. Она работает, когда я жёстко все варианты, как это:

<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, 
}); 

, но если я пытаюсь заполнить варианты с угловатым, как это:

<select id="topic-select" multiple="multiple" ng-option="topic in topicList"> 
</select> 

того окна выпадающего kindof ошибки вне, и Безразлично Показывать ни один из вариантов.

Если я удалю javascript, превратив его в многосегментный, то он отобразит все параметры.

Я рассмотрел этот аналогичный вопрос: angularjs-ng-repeat-in-bootstrap-multiselect-dropdown , но не смог с ним не повезло.

Answer 1

Вместо заполнения варианты с углового, я просто добавить их в DIV с ванилью Javascript так:

var topicSelect = $("#topic-select"); 
for (var topicId in topicList) { 
    topicSelect[0].add(new Option(topicList[topicId], topicId)); 
} 

и все работает в настоящее время.

Answer 2

1. Вам не хватает «ng-model».
2. Это «ng-options», а не «ng-option».

Попробуйте это:

<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList"> 
</select> 

Answer 3

Вам не требуется многозадачность Bootstrap, если вы собираетесь использовать его функциональность. Вы можете получить ту же функциональность в Angular, заполнив ваши варианты в выпадающем меню и добавив их в новый список по ng-click.

<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; 
    } 
} 

И, наконец, есть услуга «Фильтры» для хранения этого списка и вызывают функции, чтобы использовать его в любом месте.