Angularjs手风琴

如何展开手风琴面板上的按钮点击功能？Angularjs手风琴

这是我的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：

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

使用AngularJS，角UI和Twitter的引导，是有可能使单个手风琴拓展形式纳克重复？当我创建ng重复按钮单击不起作用。

来源

2016-04-12 SoloThink

我不知道你从哪里得到heading1变量，但我认为这是造成这个问题。

尝试用group代替它并将isOpen更改为仅在groups阵列中定义的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重复添加按钮，那么ng-click应该是什么？ – SoloThink

@SoloThink如果这不是你正在寻找的可以请你更新你的问题。 – Ankh

我想从外面打开一个手风琴的按钮链接这是我的Plunk： http://plnkr.co/edit/qVbmzXG5qfZBdQehUmgy?p=preview 不适用于ng-repeat。你能帮助我吗？＃Ankh – SoloThink

将其绑定到到group.open而不是heading1.isOpen（is-open="group.open"）
在点击只是做group.open = true

既然你有2个双向绑定，将展开组。您不需要使用html，但只能使用数据和angular/ui.bootstrap通过绑定来完成其余的工作。

来源

2016-04-12 11:11:16

Angularjs手风琴

回答

相关问题