Question

我为基本的Angular下拉列表编写了以下代码，该下拉列表从控制器获取数据。这会创建一个非常基本的下拉菜单，并且不会使用Bootstrap样式。我正在尝试将Bootstrap和Angular结合起来，但是我无法弄清楚如何将以下内容组合在一起：

当前代码：

  <ul class="nav nav-sidebar">
            <li>
                <p>
                    <select data-ng-model="s1" data-ng-options="x.col1 for x in data1" data-ng-change="updateData2()">
                        <option value="" disabled selected>Drop Down 1</option>
                    </select>
                </p>
            </li>       
            <li>
                <p>
                    <select data-ng-model="s2" data-ng-options="x.col1 for x in data2" data-ng-change="updateData3()">
                        <option value="" disabled selected>Drop Down 1</option>
                    </select>
                </p>
            </li>           
          </ul>

Bootstrap需要什么：

<ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>

我面临的问题是如何使用ng-repeat或其他指令，而不是为ul下的每个项目添加<li>。

Answer 1

这是我如何实现这一点的千尺。

创建一个JSON对象，用于保存列表项的值，属性等。您还需要一个类型属性，项目，标题行等。然后，您将通过ng-repeat运行创建的对象。在重复时设置ngSwitch和watch类型。在交换机案例中，您将拥有一个与其匹配类型相关的HTML块。这将允许您在同一重复内部创建几种不同类型的元素。

<ul ng-repeat='item in items'
       ng-switch-on='item.type'>
       <li ng-switch-when="type1" your desired attributes >
            Inner HTML
       </li>
       <li ng-switch-when="type2" your desired attributes >
            Inner HTML
       </li>
       <li ng-switch-when="type3" your desired attributes >
            Inner HTML
       </li>
</ul>

使用角度和引导程序创建包含不同数量选项的精美下拉列表

1 个答案: