Boostrap多選下拉菜單空

我正在使用bootstrap-multiselect進行多選下拉菜單。我的繼承人碼 -Boostrap多選下拉菜單空

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

來源

2015-12-02 Disha

我面臨這個問題已經。嘗試使用jQuery

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

乾杯的幫助附加選項。

來源

2015-12-02 07:47:43

但是，爲什麼它不正常工作。 – Disha

這不適用於我 – Disha

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>

來源

2015-12-02 08:14:26

我想使用引導多選 – Disha

Boostrap多選下拉菜單空

回答

相關問題