user3787969 user3787969 - 2 months ago 57
AngularJS Question

bootstrap selectpicker not working with angularjs dynamic data load for dropdown

It is working for Static dropdown list, but when its applying for dynamic data load with angularjs the selectpicker has been applied, but data's are not loaded.
if I removed this directive from dropdown then datas are loaded perfectly, what is the issue? I have tried more...

Note : the method created using with class so, no issue in that

bootselectpicker: function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ctrl) {
element.selectpicker();
}
}
}


<select id="special-size" bootselectpicker ng-model="items.selectSize" ng-options="size.key as size.value for size in products.sizes" ng-change="sizeChange('size',items.selectSize)" class="selectpicker size-droplist">
<option value="">Select Size</option>
</select>

Answer

You have to wait until the DOM is loaded since the SelectPicker is constructed based on the <option> -elements inside your <select> -element. If the ng-options has not been constructed yet there is no <option> -elements and thus the SelectPicker is empty.

You init the SelectPicker after DOM is ready by using Angular's $timeout with no delay. Without delay the $timeout just waits until the DOM is ready and then runs the callback.

Like this:

link: function(scope, element, attrs, ctrl) {
   $timeout(function() {      
      element.selectpicker();
   });
}

Also, if your products.sizes is updated you have to manually run element.selectpicker('refresh') since the SelectPicker does not listen for changes in <option>s.