Angular UI 手风琴在标题部分带有按钮答案

【问题标题】：Angular UI accordion with buttons in the header partAngular UI 手风琴在标题部分带有按钮
【发布时间】：2013-09-21 07:59:47
【问题描述】：

我正在使用来自http://angular-ui.github.com/bootstrap/ 的手风琴指令，我需要在标题部分有两个按钮。

添加 - 在原版下方创建完全相同的手风琴。
移除 - 移除手风琴。（第一个手风琴不能去掉—— 禁用“删除”按钮）。

我是 AngularJS 的新手，请帮助我实现这一目标。

【问题讨论】：

标签： angular-ui-bootstrap

【解决方案1】：

查看工作中的plunker。

您只需要在控制器中添加和删除功能

  $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);
  };

还有一个 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>

【讨论】：

嗨 Bekos，这就是我要找的。你解决了我的问题。谢谢你
非常感谢！我不知道 $event var，所以这是一个很大的帮助！

【解决方案2】：

只输入这个 e.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);
  };

【讨论】：