引导多选在 AngularJS 中不起作用答案

【问题标题】：Bootstrap multiselect not working in AngularJS引导多选在 AngularJS 中不起作用
【发布时间】：2016-01-23 08:36:26
【问题描述】：

我正在尝试在我的AngularJS 应用程序中使用bootstrap-multiselect。

我在母版页 (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();
 });

我的列表出现了，但我无法从中选择。

我错过了什么吗？

【问题讨论】：

你用的是什么 jQuery 版本？
它不会像这样工作。我建议阅读有关在 Angular 应用程序中正确使用 jQuery 插件的信息。你需要使用指令。
@dfsq 您能否将其发布为答案以便我接受？它就像一个魅力

标签： javascript angularjs twitter-bootstrap select

【解决方案1】：

Angular 不接受没有 href 的链接标签。所以在第 330 行附近添加 href='#' 然后再试一次。

【讨论】：

【解决方案2】：

您不能直接使用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;
  };
});

希望这会有所帮助。

【讨论】：