Using Bootstrap-select with AngularJS

Question

I am trying to implement http://silviomoreto.github.io/bootstrap-select/ to my AngularJS application.

Most of the people who try and do the same, they have any issue that the selectpicker is set before Angular gets the data. But for me that is not the case. When Select Picker is fired, my select has all the data but for some reason the dropdown toggle event is not firing.

HTML:

<select id="partyRole" name="partyRole" class="form-control" ng-model="partyRole" ng-options="role as role.text for role in partyRoles">
    <option value="">Please Select...</option>
</select>

The JS calls adds selectpicker to all my selects.

JS:

$(window).bind("load", function () {
    return $('select').selectpicker();
});

I am also using this directive to bind the selectpicker data:

https://github.com/joaoneto/angular-bootstrap-select/blob/master/build/angular-bootstrap-select.js

Final UI

Final UI

As you can see the div gets created from the selectpicker and I also get all the data.. But clicking on the button does nothing.

I have Angular UI, Angular JS in the application with Bootstrap stylesheets.

EDIT:

Nevermind, the version of the angular directive I downloaded from github was probably in a broken state, because after I applied it from today's updated code.. it worked.

Nevermind, the version of the angular directive I downloaded from github was probably in a broken state, because after I applied it from today's updated code.. it worked. — ArjaaAine
– ArjaaAine, Commented Jun 23, 2014 at 23:43

Ven · Accepted Answer · 2014-06-21 20:39:22Z

2

You don't want to have have some jQuery in a file and some AngularJS in another file, usually. If jQuery creates elements etc, they probably won't be picked up by angular.

The correct solution is to use an Angular directive. Here, it looks like somebody made one for you.

answered Jun 21, 2014 at 20:39

Ven

19k2 gold badges44 silver badges62 bronze badges

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

5 Comments

ArjaaAine Over a year ago

I am not sure if you saw my post to the fullest, but I am already using that directive. If I hook this directive up without using "$(window).bind("load", function () { return $('select').selectpicker(); });" Then none of the selects get the new styles.

Josh Over a year ago

@ArjaaAine I know this an old thread but what did you do to fix this?

Ven Over a year ago

from the op: "Nevermind, the version of the angular directive I downloaded from github was probably in a broken state, because after I applied it from today's updated code.. it worked."

ArjaaAine Over a year ago

Thanks for the quick reply Ven. I am going to edit my main post, so it avoids future confusions

Ben George Over a year ago

(DEPRECATED) angular-bootstrap-select... wouldn't touch that directive.

justi · Accepted Answer · 2017-06-15 18:30:57Z

1

function Selectpicker() {
    return {
        restrict: 'C',
        link: function($scope, $element) {
            $element.selectpicker();
        }
    };
}

edited Jun 15, 2017 at 18:30

answered Jun 15, 2017 at 16:18

justi

4,1162 gold badges22 silver badges24 bronze badges

Collectives™ on Stack Overflow

Using Bootstrap-select with AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related