bootstrap selectpicker无法与angularjs一起使用动态数据加载进行下拉 [英] bootstrap selectpicker not working with angularjs dynamic data load for dropdown

问题描述

它适用于静态"下拉列表，但是当其使用angularjs申请动态数据加载时，已应用了selectpicker，但未加载数据. 如果我从下拉列表中删除了该指令，那么数据将被完美加载，这是什么问题?我尝试了更多...

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...

注意:使用with类创建的方法是so，

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>

推荐答案

由于SelectPicker是基于<select>-元素内的<option>-元素构造的，因此必须等待DOM加载完毕.如果尚未构建ng-options，则不存在<option> -elements，因此SelectPicker为空.

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.

在DOM准备就绪后，可以立即使用Angular的$ timeout来初始化SelectPicker.无需延迟，$ timeout只需等待DOM准备就绪，然后运行回调即可.

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.

像这样:

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

此外，如果products.sizes已更新，则必须手动运行element.selectpicker('refresh')，因为SelectPicker不会监听<option> s中的更改.

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.

这篇关于bootstrap selectpicker无法与angularjs一起使用动态数据加载进行下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！