angularjs repeat动画
来源：互联网 发布：宝贝我知错了 编辑：程序博客网 时间：2024/06/06 07:39
<!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>
阅读全文
0 0
- angularjs repeat动画
- Angularjs repeat
- angularjs ng-repeat
- angularjs ng-repeat
- Angularjs中的ng-repeat
- angularJS ng-repeat
- angularjs ng-repeat
- angularjs-ng-repeat
- 【AngularJS】Repeat方法；
- angularjs ng-repeat
- AngularJS学习笔记ng-repeat
- AngularJs ng-repeat性能问题
- AngularJS之ng-repeat指令
- AngularJS ng-repeat的使用
- 关于AngularJs的ng-repeat
- angularjs的collection-repeat用法
- angularJs ng-repeat 去重复
- AngularJS ng-repeat简单应用
- gradle3.5 安装
- Linux日常——路由算法调研
- CSS边框盒子模型详解
- UML---行为图（活动图和状态图）
- 使用Python来编写HTTP服务器的超级指南
- angularjs repeat动画
- string对象上的操作
- CSS核心：再说框模型（Box Model）
- Python中的LEGB规则
- Codeforces 815B Karen and Test
- python 生成器(generator)
- 【HTML5学习笔记】16：CSS选择器 上
- win7下简单FTP服务器搭建
- 第十七周算法题
