需求开发需要用到折叠框,实在不想去写一个完美的组件,只想用最简单的方法达到我想要的效果,于是就有了下面的效果:
1 默认显示打开更多文件,内容隐藏
2 内容显示,title显示为折叠
代码如下:
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div ng-controller="myCtrl">
<hello>
<a ng-click="showMore()">
<span ng-if="coupon">折叠</span>
<span ng-if="!coupon">打开更多</span>
</a>
<div ng-if="coupon">
<ul>
<li>288888882</li>
<li>22pppppppp22</li>
<li>22888888888888822</li>
</ul>
</div>
</hello>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var myModule = angular.module("MyModule",[]);
myModule.controller("myCtrl", function(){});
myModule.directive("hello",function(){
return {
restrict: 'AE',
link:function(scope,element,attr){
scope.coupon = false;
scope.showMore = function showMore(){
scope.coupon = !scope.coupon;
}
}
}
});
</script>
</body>
</html>
粗制滥造,改日再研究更好的方法