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

回答

相关问题