Can't get bootstrap multiselect to work with angular

Question

I'm trying to get the bootstrap multiselect widget to work. It works when I hardcode all the options, like this:

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

but if I try to populate the options with angular, like this:

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

then the dropdown window kindof bugs out, and doesn't show any of the options.

If I remove the javascript turning it into a multiselect, then it DOES show all the options.

I took a look at this similar question: angularjs-ng-repeat-in-bootstrap-multiselect-dropdown but couldn't didn't have any luck with it.

Suggest you get rid of bootstrap.js...and use angular modules that are already developed and readily available for doing this — charlietfl, Jul 24 '15 at 03:58
Don't recommend you mix jquery and angular like this... would be better just to make (or find an already working) directive. — ajmajmajma, Jul 24 '15 at 12:45

score 2 · Answer 1 · answered Apr 11 '16 at 05:52

you don't really require Bootstrap multi-select if you're going for its functionality. You can get the same functionality in Angular, by populating your options in a dropdown, and adding them to a new list on 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>

And in the controller:

    $scope.addToFilter = function(item) {

  if(item.selected == "undefined" || item.selected == false)
  {
    item.selected = true;
    Filters.addToFilters(item);
  }
  else
  {
    Filters.removeFromFilters(item);
    item.selected = false;
  }
}

And finally have a service "Filters" to store this list and call functions to use it anywhere.

Thanks for the answer! But it's not exactly what I was looking for... this was basically Q: "how do I get X to work?" A: "forget about X and just implement it from scratch using angular" — Brendan W, Apr 11 '16 at 13:29

score 1 · Answer 2 · answered Jul 24 '15 at 12:41

1

You are missing "ng-model".
It is "ng-options" and not "ng-option".

Try this:

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

answered Jul 24 '15 at 12:41

Vipul Agarwal

1,513
3
14
24

that didn't work either. it does fine to populate the list of options, but then when the widget goes to convert the select element, it ignores all the things generated by ng-repeat – Brendan W Jul 24 '15 at 14:33
Can you create a plunker / jsfiddle and share the same so that I can see what exactly you are facing? – Vipul Agarwal Jul 24 '15 at 14:50

score 0 · Accepted Answer · answered Aug 25 '15 at 19:01

Instead of populating the options with angular, I just add them to the div with vanilla javascript like this:

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

and everything works now.

Can't get bootstrap multiselect to work with angular

3 Answers3