Dynamic Bootstrap dropdown in Angular is not working

Question

I'm trying to create a Bootstrap navbar with dropdowns from a two-level array. However, the dropdowns will only work when the dropdown class on <li> and the dropdown-toggle class on <li> are hard-coded.

Since some of my menu items should have a dropdown, and some should not, I want to set these using ng-class. Is there any way to delay ui-bootstrap untill the html has been compiled?

I found somewhere that jQuery('.dropdown-toggle').dropdown(); might reinitialize the dropdown, but the dropdown() function is not recognized in my case.

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li ng-repeat="navItem in structure.navItems" ng-class="{'active': structure.isActive(navItem), 'dropdown': navItem.subItems}"> <a href="{{navItem.href}}" ng-class="{'dropdown-toggle': navItem.subItems}" data-toggle="dropdown">
              {{navItem.name}}
              <span class="caret" ng-if="navItem.subItems"></span>
            </a>

            <!-- start dropdown menu -->
            <ul class="dropdown-menu">
                <li ng-repeat="subItem in navItem.subItems"> <a href="{{subItem.href}}" ng-class="{'active': structure.isActive(subItem)}">
                  {{subItem.name}}
                </a>

                </li>
                <!-- dit kan ook nog: <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              -->
            </ul>
            <!-- end dropdown menu -->
        </li>
    </ul>
</div>

You should consider using Angular UI Bootstrap: angular-ui.github.io/bootstrap — cvrebert
If you could add a jsfiddle with the scope variables and functions defined, it may help some debug the issue — r0m4n

luckie luckie · Accepted Answer · 2019-05-26T12:25:29

<div class="card" ng-repeat="story in $ctrl.storiesToEstimate" ng-if="!$ctrl.isAdmin">
    <div class="row">
        <div class="col-10">
            <p> 
                {{ story.storyContent[0] }}
            </p>
        </div>
        <div class="col-2">
            <div 
                uib-dropdown
                dropdown-append-to-body
            >
                <a 
                    class="btn"
                    uib-dropdown-toggle
                    id="dynamic-dropdown"
                    href="#"     
                >
                    Select Scale
                </a>
                <ul 
                    ng-if="$ctrl.arrayOfSessions[0].selected === 'Fibonacci'"
                    uib-dropdown-menu 
                    aria-labelledby="dynamic-dropdown"
                    class="dropdown-menu"
                    role="menu"
                >
                    <li role="menuitem" ng-click="$ctrl.selectedValue(0)">0</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(1)">1</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(2)">2</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(3)">3</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(5)">5</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(8)">8</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(13)">13</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(20)">20</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(40)">40</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue(100)">100</a>
                </ul>
                <ul
                    ng-if="$ctrl.arrayOfSessions[0].selected === 'T-Shirt'"
                    uib-dropdown-menu 
                    aria-labelledby="dynamic-dropdown"
                    role="menu"
                >
                    <li role="menuitem" ng-click="$ctrl.selectedValue('XS')">XS</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('S')">S</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('M')">M</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('L')">L</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('XL')">XL</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('XXL')">XXL</li>
                </ul>
                <ul
                    ng-if="$ctrl.arrayOfSessions[0].selected === 'Gamer'"
                    uib-dropdown-menu
                    aria-labelledby="dynamic-dropdown"
                    role="menu"
                >
                    <li role="menuitem" ng-click="$ctrl.selectedValue('Easy')">Easy</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('Medium')">Medium</li>
                    <li role="menuitem" ng-click="$ctrl.selectedValue('Hard')">Hard</li>
                </ul>
            </div> 
        </div>   
    </div>
</div>

I have managed to get it working based on the solution from various posts. The trick is that you use ui-bootstrap's option dropdown-append-to-body (something with rendering DOM) and that you use ng-if before applying other parameters like above. Disclaimer: the dropdown is not as smooth as the twiter's bootstrap but it's working.

Dynamic Bootstrap dropdown in Angular is not working

1 Answers