I have this issue and hope to get some advice on how to fix it.
I've moved part of my html page into a partial view and loading it through ng-view the problem now is that the dropdown-select doens't work anymore,I managed to get the style back but when I click on it, it doesn't open. When it wasn't in the partial view, I didn't even need to make a javascript call which seems to be required now.
Here's my code
index.html
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-select.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<script src="resources/js/jquery-2.1.1.min.js"></script>
<script src="resources/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap-select.js"></script>
<script src="resources/library/angular.js"></script>
<script src="resources/library/angular-route.js"></script>
<script src="resources/js/MainController.js"></script>
<script src="resources/js/main-app.js"></script>
partialview.html
-------------------
<select class="selectpicker" multiple ng-model="selE">
<option ng-repeat="e in ee">{{e}}</option>
</select>
<script>
$(document).ready(function () {
$('select').selectpicker({
style: 'btn-default',
size: false
});
});
</script>
Thank you in advance.
Mixing Angular + jQuery is not a good practice. If you want to use any jQuery plugin, you can wrap it into a custom angular directive (official docs).
See a working example of selectpicker directive in this jsFiddle.
html :
<select class="selectpicker"
multiple
title='Choose one of the following...'>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
js :
angular.module('demo')
.directive('selectpicker', function () {
return {
restrict: 'C',
link: function (scope, element) {
$(element).selectpicker({
style: 'btn-default',
size: false
});
}
};
});
Using require: 'ngModel'
in your directive will give you ngModelController
as 4th parameter to link function (see doc here).
So you can easyly bind your controller values with directive scope.
See other jsFiddle here.
Directive :
angular.module('demo')
.directive('selectpicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$el.selectpicker({
style: 'btn-default',
size: false
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
Controller :
angular.module('demo')
.controller('MainCtrl', function ($scope) {
$scope.selected = [];
});
HTML :
You have selected : {{ selected | json }}
<select ng-model="selected"
class="selectpicker"
multiple
title='Choose one of the following...'>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
See 3rd jsFiddle.
To pass options dynamically, simply update your directive :
angular.module('demo')
.directive('selectpicker', function ($timeout) {
return {
restrict: 'C',
require: 'ngModel',
replace: true,
template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
scope: {
options: '='
},
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$timeout(function () {
$el.selectpicker({
style: 'btn-default',
size: false
});
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
Then in your html :
<div ng-model="selected"
class="selectpicker"
options="issues"
title='Choose one of the following...'>
</div>