bootstrap selectpicker 不适用于 angularjs 动态数据加载下拉菜单 [英] bootstrap selectpicker not working with angularjs dynamic data load for dropdown

问题描述

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

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>

推荐答案

您必须等到 DOM 加载完毕，因为 SelectPicker 是基于 -elements 中的 代码><选择> -元素.如果 ng-options 尚未构建，则没有 -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 不会监听 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屋！