Angularjs Accordion

どのようにボタンクリック機能でアコーディオンパネルを展開するには？Angularjs Accordion

これが私のHTMLです：

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="AccordionDemoCtrl"> 
    <accordion> 
    <accordion-group ng-repeat="group in groups" is-open="heading1.isOpen"> 
     <accordion-heading> 
     <span ng-click="opened(group, $index)">{{group.title}}</span> 
     </accordion-heading> 
     {{group.content}} 
    </accordion-group>  
    <button class="btn btn-default btn-sm" ng-click="heading1.isOpen = !heading1.isOpen">Toggle 1</button> 
    </accordion> 


</div> 
    </body> 
</html>

example.js：AngularJS、角度-UIやTwitterのブートストラップを使用して

angular.module('plunker', ['ui.bootstrap']); 
function AccordionDemoCtrl($scope) { 

    $scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     content: "Dynamic Group Body - 1", 
     open: false 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     content: "Dynamic Group Body - 2", 
     open: false 
    } 
    ]; 
}

、単一アコーディオンフォームNGリピートを拡大させるためにそれ可能ですか？ ng-repeatボタンのクリックを作成しても機能しません。

出典

2016-04-12 SoloThink

heading1の変数がどこから得られたのかわかりませんが、それが問題の原因だと思います。

groupに置き換えてisOpenをgroupsアレイに定義されているようにちょうどopenに変更してみてください。 group.open代わりのクリックでheading1.isOpen（is-open="group.open"）

へとそれをバインド

<accordion> 
    <accordion-group ng-repeat="group in groups" is-open="group.open"> 
     <accordion-heading> 
      <span ng-click="opened(group, $index)">{{$index+1. + " "+ group.title}}</span> 
     </accordion-heading> 
     {{group.content}} 
    </accordion-group> 
    <div ng-repeat="group in groups"> 
     <button class="btn btn-default btn-sm" ng-click="group.open = !group.open">Toggle {{$index+1}}</button> 
    </div> 
</accordion>

出典

2016-04-12 11:06:59 Ankh

ボタンをng-clickしてからng-clickする必要がありますか？ – SoloThink

@Soloあなたが探しているものでない場合は、あなたの質問を更新してください。 – Ankh

アコーデオンのボディを外側のボタンのリンクから開こうとしていますこれは私のPlunkです。 http://plnkr.co/edit/qVbmzXG5qfZBdQehUmgy?p=preview はng-repeatで動作しません。あなたは私に助けてくれますか？＃Ankh – SoloThink

ちょうどあなたが結合2の方法を持っているので、それがグループを展開しますgroup.open = true

を行います。 htmlで作業する必要はありませんが、データのみを使用する場合はangular/ui.bootstrapを使用して残りの処理を行います。

出典

2016-04-12 11:11:16

答えて

関連する問題