AngularJS折叠菜单实现方法示例
程序员文章站
2022-04-09 12:50:32
本文实例讲述了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程序设计有所帮助。