bootstrap selectpicker不使用angularjs动态数据加载下拉列表

Question

它适用于静态下拉列表,但当使用angularjs申请动态数据加载时,已应用selectpicker,但未加载数据.如果我从下拉列表中删除了该指令,则数据完全加载,问题是什么？我试过更多......

注意:使用类创建的方法,所以没有问题

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 1

你必须等待,直到自SelectPicker是基于构建的DOM加载<option>你的内部-elements <select>-元素.如果尚未构造ng-options,则没有<option>--elements,因此SelectPicker为空.

在DOM准备好之后,通过使用Angular的$ timeout并且没有延迟来初始化SelectPicker.没有延迟,$ timeout只等待DOM准备就绪,然后运行回调.

像这样:

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

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

Answer 2

对此的解决方案如下:

定义这样的选择:

<select class="selectpicker" data-live-search="true" ng-model="id">
     <option class="small-font" selected value='any'>Anyone</option>
     <option class="small-font" ng-repeat="member in List" data-select-watcher data-last="{{$last}}" value="{{member.id}}">{{member.name}}</option>
</select>

和selectWatcher指令:

app.directive('selectWatcher', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            var last = attr.last;
            if (last === "true") {
                $timeout(function () {
                    $(element).parent().selectpicker('val', 'any');
                    $(element).parent().selectpicker('refresh');
                });
            }
        }
    };
});

它的作用是检测何时在select中添加了最后一个选项,然后选择默认选项并刷新.