如何让accordion中的new / last元素在AngularJs中自动展开

How to make new / last element in accordion automatically expanded in AngularJs?

本文关键字：AngularJs 元素 last accordion 中的 new      更新时间：2023-09-26

我在angularjs项目中使用了accordion

模板:

<uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" 
                         ng-class-odd="'panel-info'"  ng-class-even="'panel-success'">
      {{group.content}}
    </uib-accordion-group>
    <hr />
    <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
</uib-accordion>

这里是控制器:

  $scope.oneAtATime = true;
  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 3',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 4',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 5',
      content: 'Dynamic Group Body - 2'
    }
  ];
  $scope.item = {
      title: 'Dynamic Group Header - The new!!!',
      content: 'Dynamic Group Body - 20'
    } 
  $scope.addItem = function() {
    $scope.groups.push($scope.item);
  };

这是一个工作的活塞。

在html模板上，我有按钮Add Item，当按钮被单击时，新项目已添加并显示在手风琴

当新项目被添加到accordion时，我需要它自动展开(打开)。知道我该怎么做吗?如何使新添加的项目自动展开?

uib-accordion-group提供了一个参数is-open。你只需要为新创建的元素输入一个真值，它们就会自动打开。

参考文档:https://angular-ui.github.io/bootstrap//手风琴

你可以试试这个方法，它可能对你有帮助。

is-open="$last"这将展开最后一个手风琴，我用来显示最后一个手风琴打开。

is-open="$first"这将展开第一个手风琴

你可以使用

是开放的

参数，根据需要。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;
  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 3',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 4',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 5',
      content: 'Dynamic Group Body - 2'
    }
  ];
  
  $scope.item = {
      title: 'Dynamic Group Header - The new!!!',
      content: 'Dynamic Group Body - 20'
    } 
    
  $scope.addItem = function() {
    $scope.groups.push($scope.item);
    
    $scope.isOpen = true;
  };
  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse in collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>
 <div class="container">
    <div id="accordionWrapper">
        <uib-accordion close-others="true">
            <!-- All Remaining Groups -->
        </uib-accordion>
    </div>
</div> 
<uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups track by $index" 
                         ng-class-odd="'panel-info'"  ng-class-even="'panel-success'" is-open="$last">
      {{group.content}}
    </uib-accordion-group>
    <hr />
    <button class="btn btn-default btn-sm" ng-click="addItem()">ADD</button>
  </uib-accordion>
</div>
  </body>
</html>

相关文章：