accordion
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了accordion相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> </head> <body> <div ng-app="myApp"> <div class="container"> <div ng-controller="firstController"> <kittencup-group> <kittencup-collapse ng-repeat="collapse in data" heading="{{collapse.title}}">{{collapse.content}}</kittencup-collapse> </kittencup-group> </div> </div> </div> <script type="text/javascript" src="../vendor/angularjs.js"></script> <script type="text/javascript" src="app/index.js"></script> </body> </html> <div class="panel panel-default"> <div class="panel-heading" ng-click="changeOpen()"> <h4 class="panel-title"> <a href="#"> {{heading}} </a> </h4> </div> <div class="panel-collapse" ng-class="{collapse:isOpen}"> <div class="panel-body" ng-transclude> </div> </div> </div>
angular.module(‘myApp‘,[])
//数据
.factory(‘Data‘,function () {
return [
{
title:‘no1‘,
content:‘no1-content‘
},
{
title:‘no2‘,
content:‘no2-content‘
}, {
title:‘no3‘,
content:‘no3-content‘
}
]
})
.controller(‘firstController‘,[‘$scope‘,‘Data‘,function ($scope,Data) {
$scope.data=Data;
}])
.directive(‘kittencupGroup‘,function () {
return{
restrict:‘E‘,
replace:true,
template:‘<div class="panel-grouup" ng-transclude></div>‘,
transclude:true,
controllerAs:‘kittencupGroupController‘,
controller:function () {
//console.log($scope);
this.groups=[];
this.closeOtherCollapse=function (nowScope) {
angular.forEach(this.groups,function (scope) {
if(scope!==nowScope ){
scope.isOpen=true;
}
})
};
}
}
})
.directive(‘kittencupCollapse‘,function () {
return{
restrict:‘E‘,
replace:true,
require:‘^kittencupGroup‘,
templateUrl:‘tmp/kittencupCollapse.html‘,
scope:{
heading:‘@‘
},
link:function (scope,element,attrs,kittencupGroupController) {
//console.log(scope);
scope.isOpen=true;
scope.changeOpen=function () {
scope.isOpen=!scope.isOpen;
kittencupGroupController.closeOtherCollapse(scope);
};
kittencupGroupController.groups.push(scope);
},
transclude:true
}
})
以上是关于accordion的主要内容，如果未能解决你的问题，请参考以下文章
Javascript .accordion() 不工作[重复]