Bootstrap-Select Plugin with Angular JS and ajax data not working

Question

http://plnkr.co/edit/1ATuPILnevk6gCvYRvee?p=preview

angular.module('emfModule')
  .directive('selectpicker', function ($timeout) {
      return {
          restrict: 'C',
          link: function (scope, element, attrs) {

              var $el = $(element);
              $timeout(function () {

                  $el.selectpicker({
                      style: 'btn-default',
                      size: false
                  });


              });


          }
      };
  });

Hi I am trying to load data via ajax into a dropdown in an angular app. The data is coming through and i am able to populate the control but when I try to use the bootstrap-select plugin, it fails. I tried to wrap it up using an angular directive but didnt help. The Plunk above describes my use case. Can someone let me know where I am going wrong. Thank You

Ilya · Accepted Answer · 2015-01-15 07:05:53Z

2

http://plnkr.co/edit/7YR5R4aTFWDelwFDz7jV?p=preview

I've changed you selectpicker directive. It's waiting until data for options loads + a bit more time for angular so it could rebuild select. And only after that I call select-bootstrap plugin. And also directive restrict changed from C to A.

angular.module('emfModule')
.directive('selectpicker', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var $el = $(element);

      var unsubscribe = scope.$watch(attrs.selectpickerOptions, function(opts) {
        if (opts) {
          $timeout(function() {
            $el.selectpicker({
              style: 'btn-default',
              size: false
            });
            unsubscribe();
          });
        }
      })

    }
  };
});

And here's you element. I've removed class selectpicker because I don't want select-bootstrap call himself.

<select title="Select" ng-options="c.login  for c in Users" ng-model="login" name="login" selectpicker="" selectpicker-options="Users" class="form-control input-sm">
   <option value="">-- choose user --</option>
</select>

edited Jan 15, 2015 at 7:05

answered Jan 14, 2015 at 22:22

Ilya

3262 silver badges11 bronze badges

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

4 Comments

M-B Over a year ago

Beautiful. It works. Thanks a lot. However, Would you share some light on the following 2 things: (1). Why are you calling the unsubscribe function again within the timeout? (2)What did you mean by "I don't want select-bootstrap call himself". Why would it call itself if I had it in the original form as a class instead of an attribute

M-B Over a year ago

Also, once you select an item in the dropdown, any further items that you select is actually selecting the next item in index to the seleted item in the list.

M-B Over a year ago

The issue goes away if we actually set the model to the first element or some other valid element of the drop down, but I do not want to select an item intiallly and have the drop down intialize with "Select" as seein in the Plunkr

Ilya Over a year ago

I've made correction to fix this issue. See new plunker. About questions: 1) I call unsubscribe once after make sure that options are loaded cause I want to disable watch and prevent second call of bootstrap-select in future 2) Class selectpicker has special meaning for bootstrap-select plugin. When element with this class detected it became wrapped automatically.

Collectives™ on Stack Overflow

Bootstrap-Select Plugin with Angular JS and ajax data not working

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related