Блог

Он работает для статического выпадающего списка, но при его применении для динамической загрузки данных с помощью angularjs selectpicker был применен, но данные не загружены. если я удалил эту директиву из выпадающего списка, то данные загружаются идеально, в чем проблема? Я пробовал больше…

Примечание: метод, созданный с использованием with class so, не вызывает проблем в этом

 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> -элементов внутри вашего <select> элемента. Если ng-options еще не создан, в нем нет <option> -elements и, следовательно, SelectPicker пуст.

Вы инициализируете SelectPicker после того, как DOM будет готов, используя $timeout от Angular без задержки. Без задержки $ timeout просто ожидает, пока DOM не будет готов, а затем запускает обратный вызов.

Вот так:

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

Кроме того, если ваш файл products.sizes обновлен, вам придется запускать вручную, element.selectpicker('refresh') поскольку SelectPicker не прослушивает изменения в <option> файлах.

решение этой проблемы заключается в следующем:

Определение выбора следующим образом:

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

Что он делает, так это определяет, когда был добавлен последний параметр в выборе, а затем выбирает параметр по умолчанию и обновляет.

 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>