Обновить значение и действие кнопки выпадающего бутстрапа в angular -ui

У меня есть раскрывающаяся кнопка. Если я выберу элемент из раскрывающегося списка, действие основной кнопки должно измениться на действие элементов и содержимое тоже.

Я попробовал одну версию, как вы можете видеть выше, с контроллером:

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

У кого-нибудь есть хорошая идея или пример для этого?

Ответ 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>

В контроллере есть набор действий:

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

И функция для установки текущего действия:

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

Затем вы обрабатываете submit() как диспетчер - он проверяет selectedAction.id и делает правильную вещь или вызывает нужную функцию. Если вам нужно вызвать действие при выборе элемента, сделайте это в setAction().