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

Posted 2023-02-19

它适用于静态下拉列表，但当使用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>

答案

您必须等到DOM加载，因为SelectPicker是基于<option> -element中的<select> -elements构造的。如果尚未构建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中的更改。

另一答案

对此的解决方案如下：

定义这样的选择：

<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中添加了最后一个选项，然后选择默认选项并刷新。

另一答案

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

调用此函数，您可以在阵列中使用ng-repeat或ng-options

另一答案

试试这个指令

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

以上是关于bootstrap selectpicker不使用angularjs动态数据加载下拉列表的主要内容，如果未能解决你的问题，请参考以下文章

使用 Bootstrap Selectpicker 的搜索框下拉菜单不起作用

bootstrap selectpicker

如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值

Bootstrap 4 selectpicker未以角度6显示

bootstrap中selectpicker下拉框使用方法实例

使用切换后的jquery bootstrap selectpicker blur