AngelsJsで自動的にアコーディオンの新しい/最後の要素を展開する方法は？

私はangularjsプロジェクトでaccordionを使用しています。AngelsJsで自動的にアコーディオンの新しい/最後の要素を展開する方法は？

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

ここで働いているplunker：

ここ

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

がコントローラである：ここでは

はテンプレートです。 Code link

ボタンをクリックするとAdd Itemボタンをクリックすると、アコーディオンに新しいアイテムが追加されて表示されます。

アコーディオンに新しいアイテムが追加されたら、自動的に展開（開く）する必要があります。どのように達成できますか？新しい追加アイテムを自動的に展開するにはどうすればよいですか？

ありがとうございます。

出典

2016-08-27 Michael

あなたは私の答えを試しましたか？ –

uib-accordion-groupには、パラメータis-openがあります。新しく作成された要素の真理値を入力するだけで、自動的に開きます。

は参照用のマニュアルを参照してください： https://angular-ui.github.io/bootstrap/#/accordion

出典

2016-08-27 09:49:59 PerfectPixel

あなたはこのソリューションを試すことができ、その月はあなたを助けます。

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>

出典

2016-08-27 10:28:02

AngelsJsで自動的にアコーディオンの新しい/最後の要素を展開する方法は？

答えて

関連する問題