bootstrap selectpicker not working with angularjs dynamic data load for dropdown

Question

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

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>

Matias Saarinen · Accepted Answer · 2014-07-11 12:54:17Z

10

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.

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.

Like this:

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

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

answered Jul 11, 2014 at 12:54

Matias Saarinen

6064 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vamsidhar Muggulla Over a year ago

If anyone struck with using selectpicker and angularjs just move to select2 select2.org as I did and it works flawlessly updates DOM and the select2 is aware of it and updates accordingly no extra code to handle things.

user2432443 Over a year ago

anyone might wanna check this, works perfect : embed.plnkr.co/NV6Vk0AtzJ25tQldgsJx

aifa · Accepted Answer · 2014-09-18 14:57:31Z

7

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:

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.

edited Sep 18, 2014 at 14:57

answered Sep 18, 2014 at 13:19

aifa

5345 silver badges6 bronze badges

1 Comment

Dinesh Saini Over a year ago

It create browser hang if we use long dropdown like country

Wasim Akram · Accepted Answer · 2019-03-20 09:53:08Z

2

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

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

answered Mar 20, 2019 at 9:53

Wasim Akram

193 bronze badges

Comments

Kerisnarendra · Accepted Answer · 2016-09-13 10:30:34Z

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>

Collectives™ on Stack Overflow

bootstrap selectpicker not working with angularjs dynamic data load for dropdown

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related