angular-ui-bootstrap – 角度UI手柄与标题部分中的按钮

发布时间：2020-12-17 07:42:45 所属栏目：安全来源：网络整理

导读：我正在使用 http://angular-ui.github.com/bootstrap/的手风琴指令,我需要在标题部分有两个按钮. 添加 – 在原创下方创建完全相同的手风琴. 删除 – 删除手风琴. (第一把手风琴无法移除 – 禁用“删除”按钮). 我是AngularJS的新手,请帮我实现这一点. 看工作

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

>添加 – 在原创下方创建完全相同的手风琴.
>删除 – 删除手风琴. (第一把手风琴无法移除 –
禁用“删除”按钮).

我是AngularJS的新手,请帮我实现这一点.

看工作 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,newGroup);
  };

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

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

和你的html的ng重复：

<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,$event)">+</button>
          <button class="btn btn-small" ng-click="removeGroup($index,$event)" ng-show="$index">-</button>
      </accordion-heading>
      {{group.content}}
    </accordion-group>
  </accordion>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!