How can I use Bootstrap Multiselect Dropdown in AngularJS

Question

I want to use Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ in AngularJS. I hear that it's necessary to move it to Directive. But I think it's quite complicated & don't know what I have to do. If you have experienced, please guide me! Tks.

Answer 1

Here is a directive I use in my project. It works on Chrome and Firefox. You can change the options based on your own need.

angular.module('yourApp') .directive('yourDirective', function () {     return {         link: function (scope, element, attrs) {             element.multiselect({                 buttonClass: 'btn',                 buttonWidth: 'auto',                 buttonContainer: '<div class="btn-group" />',                 maxHeight: false,                 buttonText: function(options) {                     if (options.length == 0) {                       return 'None selected <b class="caret"></b>';                     }                     else if (options.length > 3) {                       return options.length + ' selected  <b class="caret"></b>';                     }                     else {                       var selected = '';                       options.each(function() {                         selected += $(this).text() + ', ';                       });                       return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';                     }                 }             });              // Watch for any changes to the length of our select element             scope.$watch(function () {                 return element[0].length;             }, function () {                 element.multiselect('rebuild');             });              // Watch for any changes from outside the directive and refresh             scope.$watch(attrs.ngModel, function () {                 element.multiselect('refresh');             });          }      }; }); 

Update two snippets for the directive which working on AngularJS v1.3.15 and bootstrap-multiselect v0.9.6: JavaScript, CoffeeScript

Answer 2

If you don't need to create code that's very re-usable, it's actually not that complicated. The first step is to create a basic directive and to get the DOM element:

angular.module('yourapp', [])  .directive('multiselectDropdown', [function() {     return function(scope, element, attributes) {          element = $(element[0]); // Get the element as a jQuery element          // Below setup the dropdown:          element.multiselect({             option1: 123,             option2: "abcd",             // etc.         })          // Below maybe some additional setup     } }]); 

Basically, once you are within the directive, it's actually just regular jQuery or JS code.

Then in your HTML code:

<select multiselectDropdown >     <option value="1">One</option>     <option value="2">One</option>     <option value="3">One</option> </select> 

You can also specify additional attributes on the DIV and get the values using the attributes parameter of the directive.