I want to add multi select to my app, but when I try loading data from controller select doesn't work. I used ng-options and ng-repeat in select but both doesn't work. My plugin: bootstrap-select
2 Answers
You are using a jQuery plugin in AngularJS, you can use it by calling the function in a directive binded with the element as shown below:
HTML:
<select class="selectpicker" bootstrap-selectpicker data-ng-model="modelValue" multiple="" data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Directive:
app.directive('bootstrapSelectpicker'), function(){
var bootDirective = {
restrict : 'A',
link: function(scope, element, attr){
$(element).selectpicker();
}
};
return bootDirective;
});
But i would recommend using Angularjs based dropwdowns, take a look at following plugin.
http://isteven.github.io/angular-multi-select/#/main
http://angular-ui.github.io/ui-select/
http://ngmodules.org/modules/angular-bootstrap-multiselect https://github.com/dotansimha/angularjs-dropdown-multiselect
Hope this helps :)
1 Comment
Patres
Thank you so much!
I work with ng-repeat on the option tag. For me running the following function each time I get new data does the job:
function selectPickerRefresh() {
$timeout(function() {
$scope.$digest();
$('.selectpicker').selectpicker('refresh');
});
}
