AngularJS折叠菜单实现方法示例
更新时间：2017年05月18日 14:09:00 作者：timelessmemoryli
这篇文章主要介绍了AngularJS折叠菜单实现方法,结合完整实例形式分析了AngularJS实现折叠菜单的具体步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
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 : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
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'
}];
});
</script>
<style type="text/css">
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
</style>
</head>
<body ng-app="expanderModule" ng-controller='SomeController'>
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>
</html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
AngularJs Dependency Injection（DI，依赖注入）
本文主要介绍AngularJs Dependency Injection，这里整理了详细资料及示例代码有兴趣的小伙伴可以参考下2016-09-09
Angular2中Bootstrap界面库ng-bootstrap详解
不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。2016-10-10
下面小编就为大家带来一篇使用yeoman构建angular应用的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了AngularJS数据绑定原理,较为详细的分析了AngularJS数据绑定的原理、使用技巧与相关注意事项,需要的朋友可以参考下2016-11-11
今天小编就为大家分享一篇Angularjs之ngModel中的值验证绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
这篇文章主要介绍了indexedDB bootstrap angularjs之 MVC DOMO (应用示例)的相关资料,需要的朋友可以参考下2016-06-06
AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。下面这篇文章主要给大家介绍了关于Angular.js中数组操作的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Angular的Bootstrap(引导)和Compiler(编译)机制
这篇文章主要介绍了Angular的Bootstrap(引导)和Compiler(编译)机制的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本文主要介绍AngularJS ng-show 指令,这里对ng-show 指令的基础知识做了详细介绍,并附有代码示例,希望能帮助学习AngularJS的同学2016-08-08
最新评论