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

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

The code above obviously displays a basic dropdown in a standard form-control manner. I've been trying to figure out how to convert this to a button style dropdown using Angular's ui-bootstrap directives but can't seem to get anywhere. Has anyone tried this?

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

2 个解决方案

#1

I hope you already found the answer, but maybe someone else will find this useful. The previous answer refers to a common drop down not a button drop down. Here is an example, but without the benefits of hg-option while I didn't use a select but a button.

我希望你已经找到了答案，但也许其他人会觉得这很有用。之前的答案是指常见的下拉菜单，而不是按钮下拉菜单。这是一个例子，但没有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>

where choices is an array of strings that will be displayed in the drop down and index is another variable in the controller scope that will reflect the selected choice.

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

#2

I have created a basic demo of a drop down using angular bootstrap..

我使用角度引导创建了一个下拉式的基本演示..

Visit :http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview

访问：http：//plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3？p =预览

Hope this is what your are looking for.

希望这是你正在寻找的。

#1

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