AngularJS折叠菜单实现方法示例
本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考,具体如下:
varexpModule=angular.module('expanderModule',[])
expModule.directive('accordion',function(){
return{
restrict:'EA',
replace:true,
transclude:true,
template:'
',
controller:function(){
varexpanders=[];
this.gotOpened=function(selectedExpander){
angular.forEach(expanders,function(expander){
if(selectedExpander!=expander){
expander.showMe=false;
}
});
}
this.addExpander=function(expander){
expanders.push(expander);
}
}
}
});
expModule.directive('expander',function(){
return{
restrict:'EA',
replace:true,
transclude:true,
require:'^?accordion',
scope:{
title:'=expanderTitle'
},
template:'
'
+'
'
+'
',
link:function(scope,element,attrs,accordionController){
scope.showMe=false;
accordionController.addExpander(scope);
scope.toggle=functiontoggle(){
scope.showMe=!scope.showMe;
accordionController.gotOpened(scope);
}
}
}
});
expModule.controller("SomeController",function($scope){
$scope.expanders=[{
title:'1',
text:'1.1.'
},{
title:'2',
text:'2.2'
},{
title:'3',
text:'3.3'
}];
});
.expander{
border:1pxsolidblack;
width:250px;
}
.expander>.title{
background-color:black;
color:white;
padding:.1em.3em;
cursor:pointer;
}
.expander>.body{
padding:.1em.3em;
}
{{expander.text}}