標籤：isp utf-8 btn type meta alt link pen none
<!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
angularjs提示訊息彈出框
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
