Bootstrap多選不適用於AngularJS

我想在我的AngularJS應用中使用bootstrap-multiselect。Bootstrap多選不適用於AngularJS

我在我的母版頁（index.html）中添加了以下內容。

<script src="/bower_components/jquery/dist/jquery.min.js"></script> 
<script src="/bower_components/angular/angular.min.js"></script> 
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

<script src="/bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 
<link rel="stylesheet" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">

出現多選下拉菜單，但我無法選擇多個可用選項。

在html模板視圖中，我添加了以下內容。

<select id="example-getting-started" multiple="multiple"> 
     <option value="cheese">Cheese</option> 
     <option value="tomatoes">Tomatoes</option> 
     <option value="mozarella">Mozzarella</option> 
     <option value="mushrooms">Mushrooms</option> 
     <option value="pepperoni">Pepperoni</option> 
     <option value="onions">Onions</option> 
    </select>

並在模板中添加了以下腳本。

$(document).ready(function() { 
     $('#example-getting-started').multiselect(); 
});

我的列表出現，但我無法從中選擇。

我失去了一些東西在這裏？

來源

2015-10-23 Jaseem Abbas

你使用的是什麼jQuery版本？ – taxicala

版本：2.1.4。 –

它不會像這樣工作。我建議閱讀有關在Angular應用程序中正確使用jQuery插件的信息。你需要使用指令。 – dfsq

您不能直接使用Bootstrap-Multiselect插件，您需要做的是定義Directive以使用multiselect選項。

HTML代碼

<div ng-controller="MainCtrl"> 
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>  
    <option data-ng-repeat="option in options" value="{{getOptionId(option)}}" ng-selected="isOptionSelected(option)" data-ng-bind-template="{{option.name}}"> 
    </option> 
</select> 
</div>

App.js

app.controller('MainCtrl', function($scope, $timeout) { 

    $scope.options = [{ 
     "name": "Option 1", 
     "id": "option1", 
     "selected": false 
     }, { 
     "name": "Option 2", 
     "id": "option2", 
     "selected": true 
     }, { 
     "name": "Option 3", 
     "id": "option3", 
     "selected": true 
     }, { 
     "name": "Option 4", 
     "id": "option4", 
     "selected": false 
     }, { 
     "name": "Option 5", 
     "id": "option5", 
     "selected": false 
     }, { 
     "name": "Option 6", 
     "id": "option6", 
     "selected": false 
     }]; 

    // You might need this timeout to be sure its run after DOM render. 
    $timeout(function() { 

     $('#example-getting-started').multiselect({ 
     disableIfEmpty: true, 
     maxHeight: 400, 
     includeSelectAllOption: true, 
     selectAllText: 'Select All', 
     enableFiltering: true, 
     enableCaseInsensitiveFiltering: true, 
     filterPlaceholder: 'Search', 
     onChange: function(element, checked) { 
      alert("selected"); 
     } 
     }); 
    }, 2, false); 

    $scope.getOptionId = function(option) { 
     return option.id; 
    }; 

    $scope.isOptionSelected = function(option) { 
     var selected; 
     if (option.selected) { 
     selected = "selected" 
     } 
     return selected; 
    }; 
});

希望這有助於。

來源

2015-10-23 18:32:25

Angular不接受沒有href的鏈接標籤。因此，在330行附近添加href ='＃'並重試。

來源

2016-10-26 12:32:53

Bootstrap多選不適用於AngularJS

回答

相關問題