Bootstrap-select: boostrap-select + angularjs (options + ng-repeat)

[truetonegroup]

This looks great, but I'm new to this and would appreciate any help for an issue I have using bootstrap-select and angularjs in the same selectpicker.

My site accesses bootstrap-select via the CDNJS links. The hotdog demo pulldowns all work perfectly, but I can't seem to make this work with angularjs as I currently do like below, using "ng-repeat" to generate the options from api call results...

<select class="form-control" ng-model="data.multipleSelect" multiple> <option ng-repeat="r in searchresults ng-if="r.Name" value="{{r.id}}"> {{r.Name}} </option> </select>

My first instinct was to code it like this, but it just looks like an empty pulldown....

<select class="selectpicker" data-style="btn-success" ng-model="data.multipleSelect" multiple> <option ng-repeat="r in searchresults" value="{{r.id}}"> {{r.Name}} </option> </select>

Any ideas of what I can do differently?

Am I having this issue because I'm using the CDNJS links and I need to add a line of code somewhere else, like in my app.js?

Thanks,
Andy

[urbanhusky]

As far as I know, you have to init bootstrap-select. A potential place to do so in angular (I'm on version 2) might be:

    ngAfterViewInit() {
        $(".selectpicker").selectpicker();
    }

However, that only would apply it to .selectpicker elements that are part of the DOM at the time the view is loaded, not at any elements that get added dynamically (*ngIf etc.).
At least that's how I understand it. From my perspective, the included style hides all <select class="selectpicker"> elements - and the JS would then generate the replacement div, button etc. next to it. This would mean that the initialisation has to be run for new such elements.... and this is the part where I'm stuck as well.

Of course, I could be entirely wrong and would like to be corrected in such a case.

[perriert]

@urbanhusky Does it work for you? I get a selectpicker is not a function error, so it looks like the js file isn't loaded.

[urbanhusky]

@peterterbe you could also be missing typings for it. I did import it in the application's bootstrap (i.e. main.ts or boot-client.ts etc.).
However, I've stopped trying to use it because the dynamic DOM was pretty much impossible to handle properly. Instead I've switched to bootstrap dropdowns (which cannot be searched etc.)

[rosorio02]

Hi there!
I know the post was made long time ago but I hope my solution will be a help for others.

I got another solution to the issue related.

What I did was first load my data from back-end using angularjs and inside the .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 happend. I suppose the plugin's methods only works inside that function.

Happy Coding!!

[rezanadimi72]

setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
},2000);

[Enl0ve]

@rezanadimi72 I also meet same problem, I try your code, and it works Unbelievably. But my code is synchronous. So modify this code like below
$timeout(funciton () {$('.selectpicker').selectpicker('refresh')});.
It also worked. Hope someone can resolve this problem ans analysis it.
Thank you.

[ayman-safi]

after appending the list you can write:
$scope.$digest();
$('.selectpicker').selectpicker('refresh');