Question

我使用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>

Answer 1

我已经遇到过这个问题了。尝试在jquery

的帮助下附加选项

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

干杯。

Answer 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>

Boostrap多选下拉列表空无一人

2 个答案: