Bootstrap 多选下拉列表为空答案

【问题标题】：Boostrap multiselect dropdown coming emptyBootstrap 多选下拉列表为空
【发布时间】：2015-12-02 16:14:26
【问题描述】：

我正在使用 bootstrap-multiselect 进行多选下拉菜单。这是我的代码--

<td style="padding-left: 20px;">
    <select ng-model="$parent.selectedRunningInstances" id="multiSelectDropDown" multiple="multiple">
        <option ng-repeat="instance in instances" value="{{instance.name}}" >{{instance.name}}</option>
    </select>
</td>

但是，即使我有包含对象的实例数组，它也会显示空的下拉列表

生成的 html --

<td>
  <select ng-model="$parent.selectedRunningInstances"    id="multiSelectDropDown" multiple="multiple" class="ng-pristine ng-valid"   disabled="" style="display: none;">
    <!-- ngRepeat: instance in instances -->
   <option ng-repeat="instance in instances" value="CacheServer" class="ng-scope ng-binding">CacheServer</option>   <!-- end ngRepeat: instance in instances -->
   <option ng-repeat="instance in instances" value="Instance1" class="ng-scope ng-binding">Instance1</option><!-- end ngRepeat: instance in instances -->
 </select>

 <div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default disabled" data-toggle="dropdown" title="None selected" disabled=""><span class="multiselect-selected-text">No Instances</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"></ul>   </div>
</td>

【问题讨论】：

标签： jquery angularjs drop-down-menu bootstrap-multiselect

【解决方案1】：

我已经遇到过这个问题。尝试在 jquery 的帮助下附加选项

$scope.instances.forEach(function(instance){ $('#multiSelectDropDown').append('<option>'+instance.name+'</option>') })

干杯。

【讨论】：

【解决方案2】：

demo

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     repeatSelect: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
    };
 }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngrepeat-select-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" multiple>
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
</body>
</html>

【讨论】：

我想使用引导多选