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.

Solution 1

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.

Solution 2

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

Comments

[Michael J. Calkins]

Just as an addon this is an excellent model for all jquery plugins you want to migrate to AngularJS. Shouldn't your 'multiselectDropdown' be 'multiselect-dropdown'?

[laurent]

Actually, the latest version of AngularJS supports many way to assign directives in HTML, I think multiselect-dropdown, multiselectdropdown, data-multiselect-dropdown, class="multiselect-dropdown" (and probably more) are all valid. "multiselect-dropdown" might indeed be more proper HTML than "multiselectDropdown".

[Oc Chuoj Dau]

@Laurent Sorry, but I haven't really known what to do next :|

[laurent]

@OcChuojDau, well for a start, does the code make sense at all? :) If it doesn't, what is it you don't understand?

[Oc Chuoj Dau]

@Laurent To me, Directive is being a very difficult & big aspect :| Could you please help me to write the code in more details in this situation? I really appreciate!

[laurent]

@OcChuojDau, actually the code above is pretty much all of it, all you need to do now is setup the options in element.multiselect(). If there's something not working for you, you need to be more specific about what it is.

[Oc Chuoj Dau]

@Laurent I haven't understood which type of options put into element.multiselect(). Could u pls tell me a little more detailed?

[laurent]

@OcChuojDau, just try with no options for a start, then add the options you need based on the page you linked - davidstutz.github.io/bootstrap-multiselect

[Oc Chuoj Dau]

@Laurent Please check for me. My ng-repeat set in <select multiselect-dropdown>...</select> is not displayed :( plnkr.co/edit/NGQZmW?p=preview

[Luke Ollett]

this works great for me EXCEPT on firefox. When the buttonText function is called after I select something in firefox, the length is always zero, so it doesnt update the text shown. Thoughts?

[Ethan Wu]

@LukeOllett It works in my project on both Chrome and Firefox. I guess there might be some issues in the HTML file. In select tag, I use ng-options and allow multiple.

[Luke Ollett]

mine looks like this ... <select ng-if="event.guests.length" class="multiselect" ng-options="guest.id as (guest.name | truncate:40) for guest in event.guests" data-placeholder="No Guests Selected" ng-model="guestSelection" multiple="multiple" table="table" multiselect-table-dropdown> </select>

[Luke Ollett]

looks like the repo was updated recently with a similar bug fix and my problem has been resolved. thanks for following up and this solution.

[Ethan Wu]

@LukeOllett I reached the similar situation before. That snippet works perfectly and suddenly fails for no reason. It turned out some updated changes cause the problem.

[MrMuh]

hi! is it possible to use this directive in combination with the ui-bootstrap directives? the dropdown directive seems not work or to compile. any ideas ?

[Ethan Wu]

@MrMuh Actually, I don't know. I use ui-bootstrap in my project too. But I don't use the drop-down directive with this one together. I think you don't need the drop-down directive to create a drop-down list if you are using Bootstrap Multiselect Dropdown.