angularjs – ng-options上的Angular UI-Bootstrap下拉按钮
发布时间:2020-12-17 08:46:27 所属栏目:安全 来源:网络整理
导读:select class="form-control" data-ng-options="t.name for t in vm.types"data-ng-model="vm.object.type"/select 上面的代码显然以标准的表单控制方式显示基本下拉列表.我一直试图弄清楚如何使用Angular的ui-bootstrap指令将其转换为按钮样式下拉列表,但似
<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的好处,而我没有使用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是控制器范围中将反映所选选项的另一个变量. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |