angular 折叠框

最新推荐文章于 2020-07-28 17:05:20 发布

weixin_33877885

最新推荐文章于 2020-07-28 17:05:20 发布

阅读量645

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tiboo/p/8711913.html

版权

需求开发需要用到折叠框，实在不想去写一个完美的组件，只想用最简单的方法达到我想要的效果，于是就有了下面的效果：

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>

　　粗制滥造，改日再研究更好的方法

转载于:https://www.cnblogs.com/Tiboo/p/8711913.html

weixin_33877885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 折叠框

需求开发需要用到折叠框，实在不想去写一个完美的组件，只想用最简单的方法达到我想要的效果，于是就有了下面的效果：1 默认显示打开更多文件，内容隐藏2 内容显示，title显示为折叠代码如下：<!DOCTYPE html><html ng-app="MyModule"><head> <meta charset...
复制链接

扫一扫