Question

<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>

上面的代码显然以标准的表单控制方式显示基本下拉列表。我一直试图弄清楚如何使用Angular的ui-bootstrap指令将其转换为按钮样式下拉列表，但似乎无法获得任何结果。有人试过吗？

Answer 1

我希望你已经找到了答案，但也许别人会觉得这很有用。之前的答案是指常见的下拉菜单，而不是按钮下拉菜单。这是一个例子，但没有hg-option的好处，而我没有使用select而是一个按钮。

<div class="input-group">
    <div class="input-group-btn" ng-class='{open: open}'>
        <button class="btn dropdown-toggle"
                data-toggle="dropdown" 
                ng-click='open=!open'>
            Action<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li ng-repeat="choice in choices" 
                        ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
                    <a href="#">{{choice}}</a></li>
                </ul>
    </div>
    <input type="text" ng-model="choices[index]" class="form-control">
 </div>

其中choices是将在下拉列表中显示的字符串数组，而index是控制器范围中的另一个将反映所选选项的变量。

Answer 2

我使用angular bootstrap创建了一个下拉式的基本演示..

访问：http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview

希望这是你正在寻找的。

ng-options上的Angular UI-Bootstrap下拉按钮

2 个答案: