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

这是working Plunker。

在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”这将扩展第一支手风琴。

您可以使用此

是开

根据您的需要

参数。

<!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>

CreateIndexResponse createIndexRequestBuilder = client().admin().indices()
                .prepareCreate(INDEX_NAME)
                .setSource(XContentFactory.jsonBuilder()
                        .startObject()
                        .field("title", "My Title 1")
                        .endObject()
                )
                .setSettings(
                        Settings.settingsBuilder()
                                .put("index.number_of_shards", 2)
                                .put("index.number_of_replicas", 2)
                )
                .execute()
                .actionGet();

如何在AngularJs中自动扩展手风琴中的new / last元素？

2 个答案: