Angularjs Akordeon

Düğme tıklatıldığında akordeon paneli nasıl genişletilir?Angularjs Akordeon

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

bu benim HTML

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

kullanma angularjs, açısal-ui ve Twitter Bootstrap, bu tek akordeon formu ng tekrarını genişletmek yapmak mümkündür? ng-yineleme düğmesi oluşturduğumda, çalışmıyor.

kaynak

2016-04-12 SoloThink

heading1 değişkenini nereden aldığınızdan emin değilim, ancak bu sorunun neden olduğunu düşünüyorum.

Bunu group ile değiştirmeyi ve isOpen'u groups dizininizde tanımlandığı gibi yalnızca open olarak değiştirmeyi deneyin. Eğer 2 yollu bağlama olduğundan tıklamada

için group.open yerine heading1.isOpen ( is-open="group.open")

için kendisine Bind

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

kaynak

2016-04-12 11:06:59 Ankh

Düğme ng tekrarı ile eklemek istiyorum ng-click ne olmalıdır? – SoloThink

@SoloThink Bu sizin aradığınız şey değilse, lütfen sorunuzu güncelleyebilirsiniz. – Ankh

dış düğme bağlantısından bir akordeon gövdesi açmak istiyorum, bu benim ng-repeat ile çalışmadığım benim Plunk: http://plnkr.co/edit/qVbmzXG5qfZBdQehUmgy?p=preview . plese bana yardım edebilir misin # Ankh – SoloThink

sadece grubun genişletilmesi,

group.open = true yok. Html ile çalışmanıza gerek yoktur, ancak sadece veri ve angular/ui.bootstrap ile bu durumda bağlama yoluyla geri kalanını yapar.

kaynak

2016-04-12 11:11:16

cevap

İlgili konular