如何使用引导多选下拉在AngularJS [英] How can I use Bootstrap Multiselect Dropdown in AngularJS

问题描述

我想用引导多选下拉<一个href=\"http://davidstutz.github.io/bootstrap-multiselect/\">http://davidstutz.github.io/bootstrap-multiselect/在AngularJS。我听说有必要将其移动到指令。但我认为这是相当复杂和放大器;不知道我必须做的。如果你所经历的，请指导我！ TKS。

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.

推荐答案

如果您不需要创建code这是非常可重复使用的，它实际上不是那么复杂。第一步是创建一个基本的指令，并获得DOM元素：

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
    }
}]);

基本上，一旦你在该指令中，它实际上只是普通的jQuery或JS code。

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

然后在你的HTML code：

Then in your HTML code:

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

您还可以指定对DIV附加属性，并使用该指令的属性参数获取值。

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

这篇关于如何使用引导多选下拉在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！