我有一个下拉式按钮.如果我从下拉列表中选择一个项目,主按钮的操作应该更改为项目操作和内容.
我试过一个版本,如上图所示,与控制器：
<div class="btn-group">
<button type="button" class="btn" ng-click="mainFunction()">{{buttonCaption}}</button>
<button type="button" class="btn dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="update('Action',func1); func1()">Action</a></li>
<li><a href="#" ng-click="update('Another action',func2); func2()">Another action</a></li>
<li><a href="#" ng-click="update('Something else here',func3); func3()">Something else here</a></li>
</ul>
</div>
但它真的很丑陋,而且更好地使用指令,用于工作多个下拉按钮.不知怎的,指令应该将主按钮的ng点击行为更改为所选项目.喜欢这个：
<!-- button one -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">{{button1.name}}</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="func1()">do something</a></li>
<li><a href="#" ng-click="func2()">do anything</a></li>
</ul>
</div>
<!-- button two -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary">{{button2.name}}</button>
<button type="button" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="func1()">Action</a></li>
<li><a href="#" ng-click="func2()">Another action</a></li>
<li><a href="#" ng-click="func3()">Something else here</a></li>
</ul>
</div>
有人有一个好主意还是一个例子？
完成类似事物的一种方法(如果您的行为根据上下文变化,则效果最佳)：
原文链接：https://www.f2er.com/angularjs/142666.html<div class="btn-group" dropdown>
<button type="submit" class="btn btn-primary" ng-click="submit()">
{{selectedAction.name}}
</button>
<button class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{action.name}}</a>
</li>
</ul>
</div>
在控制器中有一组动作：
$scope.actions = [
{id: 'action1',name: 'Action 1'},{id: 'action2',name: 'Action 2'}
];
并设置当前动作的功能：
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
然后,您将submit()视为调度程序 – 它检查selectedAction.id,并执行正确的操作或调用正确的函数.如果您需要触发该操作,因为该选项在setAction()中执行.
