twitter-bootstrap bootstrap selectpicker 不适用于 angularjs 动态数据加载下拉菜单

bootstrap selectpicker not working with angularjs dynamic data load for dropdown

提问by user3787969

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

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

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>

回答by Matias Saarinen

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.

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

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.

您可以在 DOM 准备好后立即使用 Angular 的 $timeout 初始化 SelectPicker。$timeout 立即等待 DOM 准备就绪，然后运行回调。

Like this:

像这样：

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

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

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

回答by aifa

a solution to this is the following:

对此的解决方案如下：

Defining a select like this:

像这样定义一个选择：

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

and the selectWatcher directive:

和 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');
                });
            }
        }
    };
});

What it does is detect when the last option has been added in the select, and then choose the default option and refresh.

它所做的是检测何时在选择中添加了最后一个选项，然后选择默认选项并刷新。

回答by Wasim Akram

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

Call this function where you are making your array for ng-repeat or ng-options

在为 ng-repeat 或 ng-options 创建数组的地方调用此函数

回答by Kerisnarendra

try this directive

试试这个指令

    .directive('selectPicker', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            require: '?ngModel',
            priority: 10,
            compile: function (tElement, tAttrs, transclude) {
                tElement.selectpicker($parse(tAttrs.selectpicker)());
                tElement.selectpicker('refresh');
                return function (scope, element, attrs, ngModel) {
                    if (!ngModel) return;

                    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                    scope.$evalAsync(function () {
                        if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
                        element.selectpicker('refresh');
                    });
                    });

                    ngModel.$render = function () {
                    scope.$evalAsync(function () {
                        element.selectpicker('refresh');
                    });
                    }
                };
            }
            
        };
    }])


this is the html

<select class="form-control with-search " select-picker data-live-search="true" title="Select Consumer" ng-model="selectedConsumer"                                          ng-options="c.id as c.firstName + ' ' + c.lastName for c in consumers">
</select>