代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsSelfFilter.rar
要点：计算帖子创建日期与当前天数之差，4天内显示嫩绿色，8天内显示绿色，8天外显示黄色（模拟自然界的叶子颜色变迁）
效果：
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title> New Document </title> <style> .lightgreen{ color:lightgreen; } .green{ color:green; } .yellow{ color:yellow; } </style> <script src="angular1.4.6.min.js"></script> </head> <body> <table ng-controller="MainCtrl as ctrl" border="1" cellspacing="0" bordercolor="#000000" width = "300px" style="border-collapse:collapse;"> <tr ng-repeat="topic in ctrl.topics" > <td><span class='{{topic.date|dayFilter}}' ng-bind='topic.id'/></td> <td><span class='{{topic.date|dayFilter}}' ng-bind='topic.title'/></td> <td><span class='{{topic.date|dayFilter}}' ng-bind='topic.date'/></td> </tr> </table> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.topics=[{id:"001",title:"牛津高阶英汉双解词典",date:"2017-8-16"}, {id:"002",title:"新华词典",date:"2017-8-17"}, {id:"003",title:"云计算架构技术与实践",date:"2017-8-18"}, {id:"005",title:"网络是怎样连接的",date:"2017-8-20"}, {id:"007",title:"汪国真经典代表作",date:"2017-8-22"}, {id:"008",title:"AngularJS即学即用",date:"2017-8-24"} ]; }]) .filter('dayFilter',[function(){ return function(strDate){ var one_minute=1000*60; var one_hour=one_minute*60; var one_day=one_hour*24; var currTime=new Date().getTime(); var topicTime=Date.parse(strDate); var diff=currTime-topicTime; if(diff<4*one_day){ return "lightgreen"; }else if(diff<8*one_day){ return "green"; }else{ return "yellow"; } }; }]) ; //--> </script>
本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7423544.html，如需转载请自行联系原作者
