angularjs - 更新 angular-ui 中的引导下拉按钮值和操作

Question

我有一个下拉按钮。如果我从下拉列表中选择一个项目，主按钮的操作应该更改为项目操作，内容也是如此。

正如您在上面看到的，我尝试了一个带有 Controller 的版本:

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

Plunker example

但它真的很难看，最好有指令，用于处理多个下拉按钮。指令应该以某种方式改变主按钮的 ng-click对所选项目的行为。像这样:

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

有没有人有一个好主意或一个例子？

Answer 1

完成类似事情的一种方法(如果您的操作根据上下文发生变化，则效果最佳):

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

在 Controller 中有一组 Action :

$scope.actions = [
  {id: 'action1', name: 'Action 1'},
  {id: 'action2', name: 'Action 2'}
];

还有一个设置当前 Action 的函数:

$scope.setAction = function(action) {
  $scope.selectedAction = action;
};

那么，你请客 submit()作为调度员 - 它检查 selectedAction.id并做正确的事情或调用正确的函数。如果您需要在选择项目时触发操作，请在 setAction() 中执行此操作.