Wie kann ich Bootstrap Multiselect Dropdown in AngularJS verwenden

Question

Ich möchte Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ in AngularJS verwenden. Ich habe gehört, dass es notwendig ist, es in die Richtlinie zu verschieben. Aber ich denke, es ist ziemlich kompliziert & weiß nicht, was ich tun muss. Wenn Sie erfahren haben, bitte führen Sie mich! Tks.

Answer 1

Wenn Sie keinen Code erstellen müssen, der sehr wiederverwendbar ist, ist es eigentlich nicht so kompliziert. Der erste Schritt ist es, eine Basisrichtlinie zu erstellen und das DOM-Element zu erhalten:

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

Grundsätzlich, wenn Sie in der Richtlinie sind, ist es eigentlich ganz normale jQuery oder JS-Code.

Dann in Ihrem HTML-Code:

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

Sie können auch zusätzliche Attribute für das DIV angeben und die Werte mit dem attributes Parameter der Richtlinie erhalten.

Answer 2

Hier ist eine Direktive, die ich in meinem Projekt verwende. Es funktioniert auf Chrome und Firefox. Sie können die Optionen basierend auf Ihren eigenen Bedürfnissen ändern.

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

     } 

    }; 
}); 

aktualisieren zwei Schnipsel für die Richtlinie, die auf AngularJS v1.3.15 und Bootstrap-Multiselect v0.9.6 arbeiten: JavaScript, CoffeeScript

Answer 3

Hier ist mein nehmen auf Ethan Wu Antwort. Ich reparierte ein paar Bugs und zusätzlichen Optionen, die auf dem Element außer Kraft gesetzt werden, sind: <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'); 
       }); 
      } 
     }; 
    });