我想使用 Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/在 AngularJS 中。我听说有必要将其移至指令。但我认为这很复杂,不知道我必须做什么。如果你有经验,请指导我!谢了。
最佳答案
这是我在项目中使用的指令。它适用于 Chrome 和 Firefox。您可以根据自己的需要更改选项。
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');
});
}
};
});
更新适用于 AngularJS v1.3.15 和 bootstrap-multiselect v0.9.6 的指令的两个片段:JavaScript , CoffeeScript
关于twitter-bootstrap - 如何在 AngularJS 中使用 Bootstrap 多选下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16954605/