CODEWITHSUNDEEP
javascriptangularjsbootstrap-select
Patres
Patres

Reputation: 177

Ng-options in bootstrap-select doesn't work

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

My code in jsbin

Upvotes: 2

Views: 4194

Answers (2)

ellockie
ellockie

Reputation: 4278

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

Upvotes: 0

arsinawaz
arsinawaz

Reputation: 480

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

Upvotes: 4

Related Questions