Mutiselect Dropdown not showing List using bootstrap-multiselect.min.js

Question

Multi-select Drop-down inside table head when opened, drop-down list has no value. below is the code, plz suggest any bootstrap class needs to be added .... i need to apply filter on this drop-down value using angularjs

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
	$('#filterName').multiselect();
   $http.get("http://www.w3schools.com/angular/customers_mysql.php")
   .then(function (response) {
		$scope.names = response.data.records;
   });
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<div ng-app="myApp" ng-controller="customersCtrl">
 
<table class="table table-stripped">
<thead>
	<tr>
		<th>
			<select id="filterName" multiple="multiple">
				<option ng-repeat="x in names">{{ x.Name }}</option>
			</select>
		</th>
		<th></th>
	</tr>
</thead>
<tbody>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
  </tbody>
</table>
 
</div>

max · Accepted Answer · 2016-05-31 14:49:34Z

2

You have to execute multiselect() with delay.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/customers_mysql.php")
    .then(function(response) {
      $scope.names = response.data.records;
    });
});

setTimeout(function() { 
  $('#filterName').multiselect();
}, 300);

answered May 31, 2016 at 14:49

max

8,6973 gold badges25 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jay Over a year ago

any specific reason

max Over a year ago

You have to fetch data first and then run the multiselect. In your code you run multiselect() before getting the data and that is why you don't have any names in your select.

Jay Over a year ago

thanks for the help ... you seem to be good in Bootstrap .... stackoverflow.com/questions/37531152/…

Iyas Over a year ago

Just curious, is the 300 delay more than enough, or is it depends on the connection? This solution do solve my problem, but I'm curious if this solution will fail if the connection is so poor. Is there any solution involving .then or any else solution?

Collectives™ on Stack Overflow

Mutiselect Dropdown not showing List using bootstrap-multiselect.min.js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related