Bootstrap-select, downular not working
I have this problem and hope to get some advice on how to fix it.
I moved part of my html page to partial view and loaded it via ng-view the problem is the dropdown doesn't work anymore, I managed to get the style back, but when I click on it it doesn't open. When it was not in partial view, I didn't even need to make the 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>
Thanks in advance.
source to share
Mixing Angular + jQuery is not good practice. If you want to use any jQuery plugin you can embed it in a specific Angular directive ( official docs ).
See a working example of the selectpicker directive at 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
});
}
};
});
Controller link
Using require: 'ngModel'
in your directive will give you ngModelController
as the 4th parameter for the function link ( see doc here ).
This way you can easily bind your controller values to the directive scope.
See here. jsFiddle
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>
Transfer options in parameter
See 3rd jsFiddle .
To pass parameters dynamically, just 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>
source to share
I have another solution to the problem.
What I did was first load my data from the back end using angularjs and inside .success
after my validation I wrote the following code:
angular.element(document).ready(function () {
$('select').selectpicker("destroy");
$('select').selectpicker("render");
});
I tried to do it without angular.element(document).ready(function (){})
, but nothing happened. I believe the plugin methods only work inside this function.
source to share