如何在 AngularJS 中使用 Bootstrap Multiselect Dropdown [英] How can I use Bootstrap Multiselect Dropdown in AngularJS

问题描述

我想使用 Bootstrap Multiselect Dropdown 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.

推荐答案

如果您不需要创建非常可重用的代码，它实际上并没有那么复杂.第一步是创建一个基本指令并获取 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 代码.

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

然后在您的 HTML 代码中:

Then in your HTML code:

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

您还可以在 DIV 上指定其他属性并使用指令的 attributes 参数获取值.

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

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