Accordéon UI angulaire avec boutons dans la partie en-tête

Je suis à l'aide de l'accordéon directive de http://angular-ui.github.com/bootstrap/ et j'ai besoin d'avoir deux boutons dans la partie en-tête.

  1. Ajoutez - Créer exactement les mêmes accordéon en dessous de l'original.
  2. Supprimer - Supprimer l'accordéon. (le premier accordéon ne peut pas être enlevé -
    désactiver le bouton Supprimer).

Je suis nouveau sur AngularJS et s'il vous plaît m'aider à atteindre cet objectif.

source d'informationauteur user2801604

  1. 31

    Voir un plunker.

    Vous avez juste besoin d'ajouter et de supprimer la fonction dans votre contrôleur

      $scope.addGroup = function(idx, group, e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    var newGroup = angular.copy(group);
    newGroup.no = $scope.groups.length + 1;
    $scope.groups.splice(idx + 1, 0, newGroup);
  };

  $scope.removeGroup = function(idx, e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    $scope.groups.splice(idx, 1);
  };

    et un ng-repeat html:

      <accordion close-others="oneAtATime">
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      <accordion-heading>
          {{ group.title }} ({{group.no}})
          <button class="btn btn-small" ng-click="addGroup($index, group, $event)">+</button>
          <button class="btn btn-small" ng-click="removeGroup($index, $event)" ng-show="$index">-</button>
      </accordion-heading>
      {{group.content}}
    </accordion-group>
  </accordion>
  2. 1

    mettre juste ce message.originalEvent.cancelBubble=true;

      $scope.addGroup = function(idx, group, e) {
    if (e) {
      e.originalEvent.cancelBubble=true;
    }
    var newGroup = angular.copy(group);
    newGroup.no = $scope.groups.length + 1;
    $scope.groups.splice(idx + 1, 0, newGroup);
  };

  $scope.removeGroup = function(idx, e) {
    if (e) {
      e.originalEvent.cancelBubble=true;
    }

    $scope.groups.splice(idx, 1);
  };