Question

我试图创建一个带有两级数组下拉列表的Bootstrap导航栏。但是，仅当<li>上的下拉类和<li>上的下拉切换类硬编码时，下拉列表才有效。

由于我的某些菜单项应该有一个下拉列表，而有些则不应该，我想使用ng-class设置它们。是否有任何方法可以延迟ui-bootstrap直到html被编译？

我找到了jQuery（＆＃39;。dropdown-toggle＆＃39;）。dropdown（）;可能会重新初始化下拉列表，但在我的情况下无法识别dropdown（）函数。

<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>

Answer 1

<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>

根据各种帖子的解决方案，我设法使其正常运行。诀窍是，您使用ui-bootstrap的选项dropdown-append-to-body（带有渲染DOM的东西），并且在应用上述其他参数之前使用ng-if。免责声明：下拉菜单不像twiter的引导程序那样顺畅，但是可以正常工作。

Angular中的动态Bootstrap下拉列表无效

1 个答案: