CODEWITHSUNDEEP
twitter-bootstrapangularjs
Antipod
Antipod

Reputation: 1643

AngularJS: bootstrap-select is not shown properly when ng-options attribute is used with ng-repeat

I am using bootstrap-select (https://github.com/silviomoreto/bootstrap-select) to show select elements. For some reasons when I use it with ng-options and ng-repeat, it is not shown properly.

Here is my code:

<ul>
    <li ng-repeat="category in categories">
        <select class="select" ng-model="status" ng-options="obj.Id as obj.Name for obj in statuses"></select>
     </li>
</ul>

This is what I have enter image description here

Please note that <div/> is not added just below the select control.

Did someone try to solve the issue? Can I re-initialize my select elements somehow? Please advise. Thank you.

UPDATE: Here is how the same select looks when it is placed outside of ng-repeat.:

enter image description here

You can see that the select element is actually not visible (yellow box), instead <div/> is rendered just below the select element and this is exactly what a user see on the page. This is what I meant when mentioned <div /> in my initial question.

Upvotes: 2

Views: 11297

Answers (2)

Jo&#227;o
Jo&#227;o

Reputation: 120

This is because the event listner on click of .dropdown-toggle is not present. It is part of the bootstrap javascript package, so, you have to find out a workaround.

angular.module('MyModule', []).directive('selectpicker', function () {
    return {
        restrict: 'CA',
        link: function (scope, elem) {
            angular.element(elem).selectpicker();
            angular.element('button.dropdown-toggle').on('click', function () {
                console.log('clicked')
            });
        }
    };
});

Upvotes: 2

Mohamed Abd El Rahman
Mohamed Abd El Rahman

Reputation: 293

sorry for late answer. i hope u found your answer :) i don't know if it's the perfect angular way answer but it worked for me

first i created a directive and create a listener for page finish loading

angular.module("selectBox", []).directive('selectBox', function() {
 return {
  restrict: 'E',
  link: function() {
   return $(window).bind("load", function() {
    //this will make all your select elements use bootstrap-select
    return $('select').selectpicker();
   });
  }
 };
});

and in your template just add

<select-box></select-box>

hope that would help :)

Upvotes: 1

Related Questions