在 angular-ui-bootstrap 中创建一个两列下拉列表

Posted 2023-03-05

【中文标题】在 angular-ui-bootstrap 中创建一个两列下拉列表

【英文标题】：Creating a two column dropdown in angular-ui-bootstrap

【发布时间】：2016-05-02 09:36:18

【问题描述】：

我的列表中有大约 13 个项目，所以我想让 ui-bootstrap 中的下拉菜单至少有两列。现在，这是我的按钮 html：

<div class="btn-group" uib-dropdown keyboard-nav>
  <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
            Graph By Indications<span class="caret"></span>
  </button>
    <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
      <li class="nav-item" ng-repeat="item in test2" ng-click="fullIndicationFunction(item)"><a href="#">item</a></li>
    </ul>
    <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
      <li class="nav-item" ng-repeat="item in test1" ng-click="fullIndicationFunction(item)"><a href="#">item</a></li>
    </ul>
</div>

现在，我最终将单独的列放在一起，我正试图让它们彼此并排。我已经尝试用<div class="row">...</div> 包装<ul> 标签，但这只会让下拉菜单完全停止工作。

这是上面代码产生的结果：

【问题讨论】：

您可以为任何 angular-ui 组件创建自己的模板。事实上，如果您使用非模板版本也可以创建您自己的所有模板

【参考方案1】：

使用一个<ul> 并在<row> 的列中同时包含<li> 元素将创建我正在寻找的两列列表。

<div class="btn-group" uib-dropdown uib-keyboard-nav style="border-bottom: #357ebd 3px solid; border-radius: 10px">
          <button class="btn btn-primary" ng-click="clearVals()">Clear</button>
          <button type="button" class="btn btn-primary">
             displayedIndication 
              </button>
          <button  type="button" class="btn btn-primary" uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
              <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" style="margin-right:-120px">
                <div class="row" style="padding-left:7px; padding-right:7px">
                  <div class="col-sm-6" style="padding-left:-7px">
                    <li class="nav-item" ng-repeat="item in indList" ng-click="fullIndicationFunction(item)"><a href="#">item</a></li>
                  </div>
                  <div class="col-sm-6">
                    <li class="nav-item" ng-repeat="item in indList2" ng-click="fullIndicationFunction(item)"><a href="#">item</a></li>
                  </div>
                </div>
              </ul>
            </div>

我使用内联样式只是为了表明您需要进行一些调整才能使列表看起来干净，甚至间隔而不重叠。结果如下：