Update bootstrap dropdown button value and action in angular-ui

angular-ui-bootstrap, angularjs, button

Solution

One way to accomplish something similiar (works best if your actions change based on context):

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

Have a set of actions in the controller:

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

And a function to set the current action:

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

Then, you treat `submit()` as a dispatcher - it checks `selectedAction.id` and does the right thing or calls the right function. If you need to trigger the action as the item is selected do it in `setAction()`.

Problem

I have a dropdown button. If I select an item from the dropdown list, the main button's action should change to the items action, and the content too. I tried one version, as you can see above, with 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 But it's really ugly, and it would better with directive, for working more than one dropdown button. Somehow the directive should change the main button's `ng-click` behavior to the selected item's. Like this: ``` <!-- 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> ``` Is anybody have a good idea or an example for that?

Original source