web-dev-qa-db-fra.com

Comment puis-je utiliser Bootstrap Dropdown Multiselect dans AngularJS

Je veux utiliser Bootstrap Dropdown Multiselect http://davidstutz.github.io/bootstrap-multiselect/ dans AngularJS. J'entends qu'il est nécessaire de le déplacer vers Directive . Mais je pense que c'est assez compliqué et je ne sais pas ce que je dois faire. Si vous avez expérimenté, veuillez me guider! Tks.

twitter-bootstrapangularjsangularjs-directiveangular-ui
20
Oc Chuoj Dau

Si vous n'avez pas besoin de créer du code très réutilisable, ce n'est en fait pas si compliqué. La première étape consiste à créer une directive de base et à obtenir l'élément 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
    }
}]);

Fondamentalement, une fois que vous êtes dans la directive, c'est en fait juste du code jQuery ou JS normal.

Puis dans votre code HTML:

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

Vous pouvez également spécifier des attributs supplémentaires sur le DIV et obtenir les valeurs à l'aide du paramètre attributes de la directive.

13
laurent

Voici une directive que j'utilise dans mon projet. Il fonctionne sur Chrome et Firefox. Vous pouvez modifier les options en fonction de vos propres besoins.

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

        }

    };
});

Mettre à jour deux extraits de code pour la directive qui fonctionne sur AngularJS v1.3.15 et bootstrap-multiselect v0.9.6: JavaScript , CoffeeScript

16
Ethan Wu

Voici mon point de vue sur la réponse d'Ethan Wu. J'ai corrigé quelques bugs et ajouté des options qui sont redéfinissables sur l'élément: <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>

Gist

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