Mise à jour de bootstrap bouton de la liste déroulante de la valeur et de l'action dans angular-ui

J'ai un bouton de la liste déroulante. Si je sélectionne un élément dans la liste déroulante, la principale action du bouton devrait changer pour les éléments d'action, et le contenu aussi.

J'ai essayé une version, comme vous pouvez le voir ci-dessus, avec le contrôleur:

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

Mais c'est vraiment moche, et qu'il serait mieux avec de la directive, pour plus d'un bouton de la liste déroulante. En quelque sorte, la directive devrait changer le bouton principal de l' ng-click comportement de l'élément sélectionné. Comme ceci:

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

Est quelqu'un a une bonne idée ou un exemple pour qui?

OriginalL'auteur kree | 2014-06-04

  1. 19

    Une façon d'accomplir quelque chose de semblable (qui fonctionne le mieux si votre actions changent en fonction du contexte):

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

    Ont un ensemble d'actions dans le contrôleur:

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

    Et une fonction pour définir l'action en cours:

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

    Puis, vous le traitez de submit() comme répartiteur - il vérifie selectedAction.id et fait la bonne chose ou appelle la bonne fonction. Si vous avez besoin de déclencher l'action que l'élément est sélectionné le faire dans setAction().

    Mais il devrait fonctionner par une directive. Je voudrais l'utiliser plus d'un bouton, et sa serait génial, si je ne devrait élargir le code html d'un bouton nouveau.
    Ici est la façon dont vous l'avez fait: plunker C'est bien beau, mais que les actions devraient être stockées dans le code html, et de la directive aurait besoin de mettre à jour la principale action du bouton. Ainsi que je élargir la question.

    OriginalL'auteur user2847643