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.
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