Bootstrap Select Plugin does not render in Angular ui router ng-view

Question

I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:

<select name="jobdomainTeamId"
        class="form-control selectpicker"
        data-live-search="true"
        multiple=""
        style="display: none;"
        ng-model="data.detailView.jobDomain.teams"
        ng-options="team.id as team.displayName for team in data.detailView.teams"
>
    <option value="">No selection</option>
</select>

The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").

But when I add the exact same code to index.html, commenting out the ng-view

<!--<div ui-view="body"></div>-->

Here the select works - extra DOM nodes are generated and functionality is as expected. I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js

It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include

angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])

Does anyone have a clue what might block Bootstrap css / js here??

You can call $('.select').selectpicker(); in onInit() method as first line. — Shashi Ranjan
– Shashi Ranjan, Commented Oct 8, 2022 at 7:50

Marc · Accepted Answer · 2016-05-20 12:24:29Z

2

Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble. Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.

answered May 20, 2016 at 12:24

Marc

4191 gold badge7 silver badges17 bronze badges

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

Comments

Zeko · Accepted Answer · 2016-05-18 08:13:19Z

1

you defined style='display:none' in your select so it's working as expected. if you want to hide it use the directive ng-hide instead, in some case you should use angular UI for specific actions

answered May 18, 2016 at 8:13

Zeko

112 bronze badges

Comments

Shane soysa · Accepted Answer · 2022-10-17 16:25:14Z

0

I was struggling with the same issue. This methods helped me. Hope it help someone else also Install jquery on your angular project.

npm i --save-dev @types/jquery

import jquery to the component.

declare var $: any;

run the below code on ngOnInit

  ngOnInit(): void {
    $('.selectpicker').selectpicker('refresh'); 

  }

edited Oct 17, 2022 at 16:25

answered Oct 17, 2022 at 16:24

Shane soysa

631 silver badge8 bronze badges

Collectives™ on Stack Overflow

Bootstrap Select Plugin does not render in Angular ui router ng-view

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related