angularjs repeat动画

最新推荐文章于 2022-10-20 16:21:47 发布
裂魂人1214
最新推荐文章于 2022-10-20 16:21:47 发布
阅读量526
点赞数
分类专栏： angularjs 文章标签： angularjs
本文链接：https://blog.csdn.net/b422761838/article/details/73440983
版权
angularjs 专栏收录该内容
16 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="jquery-2.1.3.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="angular-animate.min.js"></script>
    <script src="ui-bootstrap-tpls-1.3.2.js"></script>
    <style>
        .mobile{
            border: solid 1px #2a6496;
            height: 500px;
            display: flex;
        }

        .mobile dl{
            margin:0px;
            padding: 0px;
            display: flex;
            flex:1;
            flex-direction: column-reverse;
        }

        .mobile dl dt{
            background: #5bc0de;
            color: #4cae4c;
            height: 20px;
            text-align: center;
            border: solid 1px #dff0d8;
            cursor: pointer;
            line-height: 1.2em;
        }

        .mobile dl dd{
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 10px;

        }

        .mobile dl dd a{
            border: solid 1px #dff0d8;
            text-decoration: none;
        }

        .title{
            line-height: 2em;
            text-align: right;
        }

        .input{
            margin-top: 0px;
        }

        .form-group {
            margin-bottom: 15px;
            height: 50px;
        }

        /*元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}*/
       /* .kongtest { transition: all 5s; -webkit-transition:all 1s }
        .kongtest.ng-enter {opacity: 0; height: 0px;}
        .kongtest.ng-enter.ng-enter-active { opacity: 100; height: 200px;}
        .kongtest.ng-leave { opacity: 100; height: 100px;}
        .kongtest.ng-leave.ng-leave-active { opacity: 0; height: 0px;}*/

    </style>
</head>
<body ng-app="kongwc" ng-controller="myCtrl">
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="mobile">
                    <dl ng-repeat="data in datas.button">
                        <dt>
                            {{data.name}}
                        </dt>
                        <dd>
                            <a href="#" ng-repeat="v in data.sub_button">{{v.name}}</a>
                            <!--<a href="#">中级工程师</a>
                            <a href="#">高级工程师</a>-->
                        </dd>
                    </dl>
                    <!--<dl>
                        <dt>
                            语言
                        </dt>
                        <dd>
                            <a href="#">java</a>
                            <a href="#">php</a>
                            <a href="#">.net</a>
                        </dd>
                    </dl>-->
                </div>
            </div>
            <div class="col-xs-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h1 class="panel-title">编辑</h1>
                    </div>
                    <div class="panel-body">
                        <div class="panel panel-default kongTest1" ng-repeat="(key,data) in datas.button" >
                            <div class="panel-body">
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label title" >标题</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"  ng-model="data.name" />
                                    </div>
                                </div>
                                <div class="form-group" ng-hide="data.sub_button">
                                    <label  class="col-sm-2 control-label title input" >类型</label>
                                    <label class="radio-inline">
                                        <input type="radio"  ng-model="data.type" value="click"> 关键词
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio"   ng-model="data.type" value="view"> 网址
                                    </label>
                                </div>


                                <div class="form-group" ng-if="data.type == 'click' && !data.sub_button">
                                    <label  class="col-sm-2 control-label title input" >关键词</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control input" ng-model="data.key"/>
                                    </div>
                                </div>

                                <div class="form-group" ng-if="data.type == 'view' && !data.sub_button">
                                    <label  class="col-sm-2 control-label title input" >链接</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control input" ng-model="data.url"/>
                                    </div>
                                </div>

                                <div class="panel panel-default kongTest1" style="margin-top: 100px;" ng-repeat="v in data.sub_button track by $index ">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label  class="col-sm-2 control-label title" >标题</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control"  ng-model="v.name"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-2 control-label title input" >链接</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control input" ng-model="v.url"/>
                                            </div>
                                        </div>

                                    </div>
                                    <button class="btn bg-danger" type="button" ng-click="delSecondMenu(data,$index)">删除菜单</button>
                                </div>
                                <button class="btn btn-info" type="button" ng-click="addSecondMenu(data)">添加菜单</button>
                                <button class="btn bg-danger" type="button" ng-click="delFirstMenu(key)">删除一级菜单</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success" ng-click="addFirstMenu()">添加一级菜单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
bs
</body>
    <script>
        angular.module("kongwc",["ngAnimate"]).animation('.kongTest1',function () {
            return {
                enter: function (element, done) {
                    element.css('display', 'none');
                    $(element).slideDown(1000, function () {
                        done();
                    });
                },
                leave: function (element, done) {
                    $(element).slideUp(1000, function () {
                        done();
                    });
                },
                move: function (element, done) {
                    element.css('display', 'none');
                    $(element).fadeIn(500, function () {
                        done();
                    });
                }
            }
        }).controller("myCtrl",function ($scope) {
            $scope.datas = {
                "button":[
                    {
                        "type":"click",
                        "name":"今日歌曲",
                        "key":"V1001_TODAY_MUSIC"
                    },
                    {
                        "name":"子菜单",
                        "type" : "view",
                        "sub_button":[
                            {
                                "type":"view",
                                "name":"搜索",
                                "url":"http://www.soso.com/"
                            },
                            {
                                "type":"miniprogram",
                                "name":"wxa",
                                "url":"http://mp.weixin.qq.com"
                            },
                            {
                                "type":"click",
                                "name":"赞一下我们",
                                "key":"V1001_GOOD"
                            }]
                    }]
            };

            var menu = {
                "type":"click",
                "name":"",
                "key":""
            };

            var submenu = {
                "type":"view",
                "name":"",
                "url":""
            };
            //添加一级菜单
            $scope.addFirstMenu = function () {
                $scope.datas.button.push(menu);
            };

            //添加二级菜单
            $scope.addSecondMenu = function (item) {
                if(item.sub_button == null){
                    item.sub_button = [];
                }
                item.sub_button.push(submenu);
            }

            //删除二级菜单
            $scope.delSecondMenu = function (item,key) {
                item.sub_button.splice(key,1);
            };

            //删除一级菜单
            $scope.delFirstMenu = function (key) {
                $scope.datas.button.splice(key,1);
            };
        });

    </script>
</html>
裂魂人1214
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angularjs repeat动画

.mobile{ border: solid 1px #2a6496; height: 500px; display: flex; } .mobile dl{ margin:0px; padding: 0px; displ
复制链接

扫一扫