Bootstrap 多選在 AngularJS 中不起作用

Question

我正在嘗試在我的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();
 });

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

我在這里錯過了什么嗎？

Answer 1

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

應用程序.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;
  };
});

希望這可以幫助。

Answer 2

Angular 不接受沒有 href 的鏈接標簽。 所以在第 330 行附近添加 href='#' 並重試。