web-dev-qa-db-ja.com

AngularJSでBootstrap Multiselect Dropdownを使用する方法

AngularJSでBootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ を使用します。ディレクティブに移動する必要があると聞きました。 。しかし、私はそれは非常に複雑で、私が何をしなければならないのか分からないと思います。

twitter-bootstrapangularjsangularjs-directiveangular-ui
20
Oc Chuoj Dau

非常に再利用可能なコードを作成する必要がない場合、実際にはそれほど複雑ではありません。最初のステップは、基本的なディレクティブを作成し、DOM要素を取得することです。

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コードになります。

次に、HTMLコードで：

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

DIVで追加の属性を指定し、ディレクティブのattributesパラメーターを使用して値を取得することもできます。

13
laurent

これが私のプロジェクトで使用するディレクティブです。 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で動作するディレクティブの2つのスニペットを更新します。 JavaScript 、 CoffeeScript

16
Ethan Wu

イーサン・ウーの答えに対する私の見解です。いくつかのバグを修正し、要素でオーバーライド可能なオプションを追加しました：<select multi-select includeSelectAllOption="true" enableFiltering="true" enableClickableOptGroups="true" enableCollapsibleOptGroups="true" multiple ng-model="vm.selectedPlants" ng-options="plant.name group by plant.operatingCompanyName for plant in vm.plants"></select>

要旨

// AngularJS: 1.5.8
// bootstrap-multiselect: 0.9.13

angular.module('SocoApp')
    .directive('multiSelect', function () {
        return {
            link: function (scope, element, attrs: any) {

                var options: any = {
                    onChange: function (optionElement, checked) {
                        if (optionElement != null) {
                            $(optionElement).removeProp('selected');
                        }
                        if (checked) {
                            $(optionElement).prop('selected', 'selected');
                        }
                        element.change();
                    }
                };

                //attrs are lowercased by Angular, but options must match casing of bootstrap-multiselect
                if (attrs.enablehtml) options.enableHTML = JSON.parse(attrs.enablehtml); //default:  false
                if (attrs.buttonclass) options.buttonClass = attrs.buttonclass; //default:  'btn btn-default'
                if (attrs.inheritclass) options.inheritClass = JSON.parse(attrs.inheritclass); //default:  false
                if (attrs.buttonwidth) options.buttonWidth = attrs.buttonwidth; //default:  'auto'
                if (attrs.buttoncontainer) options.buttonContainer = attrs.buttoncontainer; //default:  '<div class="btn-group" />'
                if (attrs.dropright) options.dropRight = JSON.parse(attrs.dropright); //default:  false
                if (attrs.dropup) options.dropUp = JSON.parse(attrs.dropup); //default:  false
                if (attrs.selectedclass) options.selectedClass = attrs.selectedclass; //default:  'active'
                if (attrs.maxheight) options.maxHeight = attrs.maxheight; //default:  false,  // Maximum height of the dropdown menu. If maximum height is exceeded a scrollbar will be displayed.
                if (attrs.includeselectalloption) options.includeSelectAllOption = JSON.parse(attrs.includeselectalloption); //default:  false
                if (attrs.includeselectallifmorethan) options.includeSelectAllIfMoreThan = attrs.includeselectallifmorethan; //default:  0
                if (attrs.selectalltext) options.selectAllText = attrs.selectalltext; //default:  ' Select all'
                if (attrs.selectallvalue) options.selectAllValue = attrs.selectallvalue; //default:  'multiselect-all'
                if (attrs.selectallname) options.selectAllName = JSON.parse(attrs.selectallname); //default:  false
                if (attrs.selectallnumber) options.selectAllNumber = JSON.parse(attrs.selectallnumber); //default:  true
                if (attrs.selectalljustvisible) options.selectAllJustVisible = JSON.parse(attrs.selectalljustvisible); //default:  true
                if (attrs.enablefiltering) options.enableFiltering = JSON.parse(attrs.enablefiltering); //default:  false
                if (attrs.enablecaseinsensitivefiltering) options.enablecaseinsensitivefiltering = JSON.parse(attrs.enableCaseInsensitiveFiltering); //default:  false
                if (attrs.enablefullvaluefiltering) options.enableFullValueFiltering = JSON.parse(attrs.enablefullvaluefiltering); //default:  false
                if (attrs.enableclickableoptgroups) options.enableClickableOptGroups = JSON.parse(attrs.enableclickableoptgroups); //default:  false
                if (attrs.enablecollapsibleoptgroups) options.enableCollapsibleOptGroups = JSON.parse(attrs.enablecollapsibleoptgroups); //default:  false
                if (attrs.filterplaceholder) options.filterPlaceholder = attrs.filterplaceholder; //default:  'Search'
                if (attrs.filterbehavior) options.filterBehavior = attrs.filterbehavior; //default:  'text', // possible options: 'text', 'value', 'both'
                if (attrs.includefilterclearbtn) options.includeFilterClearBtn = JSON.parse(attrs.includefilterclearbtn); //default:  true
                if (attrs.preventinputchangeevent) options.preventInputChangeEvent = JSON.parse(attrs.preventinputchangeevent); //default:  false
                if (attrs.nonselectedtext) options.nonSelectedText = attrs.nonselectedtext; //default:  'None selected'
                if (attrs.nselectedtext) options.nSelectedText = attrs.nselectedtext; //default:  'selected'
                if (attrs.allselectedtext) options.allSelectedText = attrs.allselectedtext; //default:  'All selected'
                if (attrs.numberdisplayed) options.numberDisplayed = attrs.numberdisplayed; //default:  3
                if (attrs.disableifempty) options.disableIfEmpty = JSON.parse(attrs.disableifempty); //default:  false
                if (attrs.disabledtext) options.disabledText = attrs.disabledtext; //default:  ''
                if (attrs.delimitertext) options.delimiterText = attrs.delimitertext; //default:  ', '

                element.multiselect(options);

                // Watch for any changes to the length of our select element
                scope.$watch(function () {
                    //debugger;
                    return element[0].length;
                }, function () {
                    scope.$applyAsync(element.multiselect('rebuild'));
                });

                // Watch for any changes from outside the directive and refresh
                scope.$watch(attrs.ngModel, function () {
                    element.multiselect('refresh');
                });
            }
        };
    });
0
Homer