Oc Chuoj Dau Oc Chuoj Dau - 1 month ago 15
AngularJS Question

How can I use Bootstrap Multiselect Dropdown in AngularJS

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

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.