CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
Jay
Jay

Reputation: 395

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

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>

Upvotes: 0

Views: 2262

Answers (1)

max
max

Reputation: 8687

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

Upvotes: 2

Related Questions