gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 10:07:35 24 4
gpt4 key购买 nike

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

上面的代码显然以标准的表单控件方式显示了一个基本的下拉列表。我一直在试图弄清楚如何使用 Angular 的 ui-bootstrap 指令将其转换为按钮样式的下拉列表,但似乎无处可去。有没有人试过这个?

最佳答案

我希望你已经找到了答案,但也许其他人会发现这很有用。上一个答案是指普通下拉而不是按钮下拉。这是一个示例,但没有 hg-option 的好处,而我没有使用选择而是使用按钮。

<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 是 Controller 范围中的另一个变量,它将反射(reflect)所选的选项。

关于angularjs - ng-options 上的 Angular UI-Bootstrap 下拉按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21108643/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com