标题部分带有按钮的 Angular UI 手风琴 [英] Angular UI accordion with buttons in the header part

问题描述

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

1. 添加 - 在原始手风琴下方创建完全相同的手风琴.
2. 移除 - 移除手风琴.(第一个手风琴不能取下-禁用删除"按钮).

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

解决方案

查看正在运行的 plunker.>

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

 $scope.addGroup = function(idx, group, e) {如果 (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) {如果 (e) {e.preventDefault();e.stopPropagation();}$scope.groups.splice(idx, 1);};

和一个 ng-repeat 用于你的 html:

 <accordion-group Heading="{{group.title}}" ng-repeat="group in groups"><手风琴标题>{{ 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></手风琴>

I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have two buttons in the header part.

1. Add - Create exactly same accordion below the original.
2. Remove - Remove the accordion. (the first accordion can not be removed - disable the Remove button).

I am new to AngularJS and please help me to achieve this.

解决方案

See a working plunker.

You just need a add and remove function in your controller

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

and a ng-repeat for your 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>

这篇关于标题部分带有按钮的 Angular UI 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！