Angularjs Akkordeon

Wie kann man das Akkordeon Panel auf Knopfdruck erweitern?Angularjs Akkordeon

dies mein HTML ist:

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

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

Mit AngularJS, eckig-ui und Twitter Bootstrap ist es möglich, das einzelne Akkordeon erweitert Form ng Wiederholung zu machen? wenn ich ng-repeat-Taste erstellen klicken Sie nicht funktioniert.

Quelle

2016-04-12 SoloThink

Ich bin mir nicht sicher, wo Sie die heading1 Variable haben, aber ich denke, das verursacht das Problem.

Ersetzen Sie das durch group und ändern Sie isOpen zu open wie in Ihrem groups Array definiert.

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

Quelle

2016-04-12 11:06:59 Ankh

ich möchte button per ng wiederholen dann was soll der ng-click sein? – SoloThink

@SoloThink Wenn dies nicht das ist, was Sie suchen, können Sie bitte Ihre Frage aktualisieren. – Ankh

Ich möchte ein Akkordeon-Körper von außerhalb öffnen Button-Link das ist mein Plunk: http://plnkr.co/edit/qVbmzXG5qfZBdQehUmgy?p=preview nicht mit ng-Wiederholung arbeiten. können Sie mir helfen plese. # Ankh – SoloThink

Bind es zu group.open statt heading1.isOpen (is-open="group.open")
Auf klicken Sie einfach group.open = true

Da Sie 2-Wege-Bindung haben, wird es die Gruppe erweitern. Sie müssen nicht mit dem html arbeiten, sondern nur mit den Daten und angular/ui.bootstrap erledigt in diesem Fall den Rest per Binding.

Quelle

2016-04-12 11:11:16

Antwort

Verwandte Themen