<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
max-height: 400px;
background-color: #eee;
50%;
position: fixed;
bottom: 0px;
overflow: auto;
}
.messBox{
100%;
background-color: green;
color:#ffffff;
margin-bottom: 0;
}
</style>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-controller="myCtl">
<div class="box" delete-msg>
<div ng-repeat="item in myarr" class="messBox">
<p>名字:{{item.name}}</p>
<span>年龄:{{item.age}}</span>
<p>爱好:{{item.love}}</p>
</div>
</div>
<button class="btn" ng-click="add()">添加</button>
<script type="text/javascript">
var myApp=angular.module('myApp',[]);
myApp.directive("deleteMsg",function(){
return{
restrict: 'AE',
link:function(scope,ele,attr){
var el=angular.element(ele);
setInterval(function(){
if(el.find(".messBox").length>=1){
el.find(".messBox").eq(0).animate({
opacity:0,
translate:"all 2s"
},function(){
this.remove();
scope.myarr.splice(0,1);
})
}
},3000)
}
}
})
myApp.controller('myCtl',function($scope){
$scope.myarr=[
{"name":"snow","age":20,"love":"运动"},
{"name":"Tom","age":20,"love":"看书"}
];
$scope.add=function(){
$scope.myarr.push( {"name":"goudan","age":20,"love":"看书"})
}
})
</script>
</body>
</html>
