如何使AngularJs中的手风琴中的新元素/最后一个元素自动扩展？

Question

我在我的angularjs项目中使用了手风琴。

这是模板：

<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 ，其中已添加新项目并以手风琴形式显示。

将新项目添加到手风琴后，我需要将其自动展开（打开）。 知道如何实现吗？ 如何使新添加的项目自动展开？

Answer 1

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

请参阅文档以供参考： https : //angular-ui.github.io/bootstrap/#/accordion

Answer 2

您可以尝试此解决方案，这可能会对您有所帮助。

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>

如何使AngularJs中的手风琴中的新元素/最后一个元素自动扩展？

问题描述

2 个解决方案

解决方案1
0 2016-08-27 09:49:59

解决方案2
0 2016-08-27 10:28:02

如何使AngularJs中的手风琴中的新元素/最后一个元素自动扩展？

问题描述

2 个解决方案

解决方案1 0 2016-08-27 09:49:59

解决方案2 0 2016-08-27 10:28:02

解决方案1
0 2016-08-27 09:49:59

解决方案2
0 2016-08-27 10:28:02