angularjs提示消息弹出框 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            max-height: 400px;
            background-color: #eee;
            width: 50%;
            position: fixed;
            bottom: 0px;
            overflow: auto;
        }
        .messBox{
            width: 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>
View Code

 

posted @ 2017-08-16 23:07  咚咚锵咚呛  阅读(691)  评论(0)    收藏  举报