Dynamic bootstrap inference in Angular not working
I am trying to create a Bootstrap navbar with dropdowns from a two level array. However, dropdowns will only work when the dropdown <li>
class and the dropdown-toggle class are not <li>
hardcoded.
Since some of my menu items should have a dropdown and some shouldn't, I want to set them using the ng class. Is there a way to defer the ui-bootstrap before the html has been compiled?
I found somewhere that jQuery ('. Dropdown-toggle'). dropdown (); can re-initialize 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>
source to share
<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 managed to get this to work based on a solution from various posts. The trick is that you are using the dropdown-append-to-body
ui-bootstrap option (something with DOM rendering) and that you use ng-if
before applying the other parameters as described above. Disclaimer: The dropdown is not as smooth as the twiter downloader, but it does work.
source to share