bootstrap selectpicker不适用于angularjs动态数据加载以进行下拉答案

【问题标题】：bootstrap selectpicker not working with angularjs dynamic data load for dropdownbootstrap selectpicker不适用于angularjs动态数据加载以进行下拉
【发布时间】：2014-07-05 14:09:56
【问题描述】：

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

注意：使用 with 类创建的方法，所以没有问题

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>

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-directive

【解决方案1】：

您必须等到 DOM 加载完毕，因为 SelectPicker 是基于您的 <select> 元素中的 <option> 元素构建的。如果 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 中的更改。

【讨论】：

感谢您的回复
如果有人对使用 selectpicker 和 angularjs 感到震惊，只需像我一样移动到 select2 select2.org 并且它可以完美地更新 DOM，并且 select2 知道它并相应地更新，不需要额外的代码来处理事情。
任何人都可能想检查一下，效果很好：embed.plnkr.co/NV6Vk0AtzJ25tQldgsJx

【解决方案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');
                });
            }
        }
    };
});

它的作用是检测最后一个选项何时添加到选择中，然后选择默认选项并刷新。

【讨论】：

如果我们使用像国家这样的长下拉菜单，它会导致浏览器挂起

【解决方案3】：

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

在您为 ng-repeat 或 ng-options 创建数组的位置调用此函数

【讨论】：

【解决方案4】：

试试这个指令

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

【讨论】：