AngularJS中自定义过滤器

更新时间：2022-08-22 16:14:08

代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsSelfFilter.rar

要点：计算帖子创建日期与当前天数之差，4天内显示嫩绿色，8天内显示绿色，8天外显示黄色（模拟自然界的叶子颜色变迁）

效果：

AngularJS中自定义过滤器

代码：

<!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，如需转载请自行联系原作者

上一篇 : ：Linux下如何保持gnome-terminal窗口执行命令后停留而不立刻关闭(gnome-terminal -x)下一篇 : LVS三种工作模式总结

AngularJS中自定义过滤器

相关阅读

推荐文章