前端之家收集整理的这篇文章主要介绍了
angularjs repeat动画，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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,move: function (element,'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","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> 原文链接：https://www.f2er.com/angularjs/147045.html
