AngularJS过滤器介绍

最新推荐文章于 2021-10-20 08:44:18 发布

chenggou9601

最新推荐文章于 2021-10-20 08:44:18 发布

阅读量225

点赞数

文章标签： json javascript ui ViewUI

原文链接：https://my.oschina.net/u/3161974/blog/1354166

版权

<!--与过滤器共舞
1.1 AngularJS过滤器介绍
AngularJS的过滤器用于处理数据以及将数据格式化后呈现给用户。可以通过HTML中的表达式来使用他们，也可以直接作用于控制器或服务中的数据。
大部分情况下，过滤器处于数据传递链上的最后一环，将数据转换为用户熟悉的格式。最常见的是时间雷响的数据转换，将数据转换成货币格式等。
其还有一个功能，当它们应用在视图中时，能够提供动态的数据，这些数据不需要被存储起来。当我们在html中使用过滤器时，被过滤后呈现给用户
的数据并不会改变它的初始值。

基本过滤器语法：{{expression|filter}}过滤器会接收表达式的值（字符串、数字或数组），然后将它转化成其他格式。
也可以使用多个过滤器语法如：{{expression|filter1|filter2}}例如：{{ctrl.name|lowercase|limitTo:5}}先将它转换成小写格式，然后只显示前5个字母

1.2常用的AngularJS过滤器
currency 货币过滤器将指定的数字格式化成包含分隔符，数字以及货币符号的货币格式。这个过滤器的第二个参数是可选的，代表货币符号。
number  数字过滤器可以通过添加分隔符来将数字转换成易读的格式，该过滤器也可以接收一个可选参数来决定保留小数点后几位
lowercase 小写过滤器
uppercase  大写过滤器
json json过滤器在调试过程中能起到至关重要的作用，当我们需要将某个JSON对象或者数组显示在UI中时它也能大显身手。它可以将JSON对象或数组转化成字符串显示
date  date日期格式过滤器时高度自定义的，用户可以自行制定格式或者选择内置的三种格式(short,medium和long)

1.3如何显示数组格式的数据，如何根据需求切割以及排序
limitTo 接收字符串或者数组，然后根据开始索引或者结束索引返回输入值的子集。如果limitTo接收到了某个数字作为参数，那么当输入值是数组（字符串）时，它
        返回相应个数元素（字符）。如果是负数，那么它会从后往前数。
orderby 让我们可以根据事先定义好的比较大小表达式（也可以是一组表达式）将数组进行排序。它的第二个参数是可选的布尔型，代表数组是否需要反序排序。
        最简单的比较大小的表达式是一个字符串，它表示根据哪个字段进行排序（对象的键名），也可以在字段名之前添加可选的+或者-符号来决定按照
        升序还是降序排列。比较大小的表达式也可以是函数，根据返回值来判断比较结果（通过简单的<、>和=比较）来决定顺序。最后表达式也可以是一个数组，
        其中每个元素都是字符串或者数组。
filter filter通过断言或者函数来决定数组中的哪些元素是符合要求的，将添加到结果集中，而哪些将会被过滤掉。它通常和ng-repeat配合使用来动态
       过滤数组。过滤表达式可能是:string object function
       string:如果表达式是一个字符串，那么AngularJS会扫描数字中每个对象的键集，如果其中包含了指定的字符串，那么该元素就符合要求。可以
               在字符串前增加！前缀，结果正好相反，包含该字符串的元素会被过滤掉。
       object：如果表达式是一个匹配对象，那么AngularJS会扫描数字中每个对象的键值。如：表达式为{size,"M"}，查找每个对象中是否包含了size这个
               键名，而它的值中是否包含了"M"这个字符（不一定正好为"M"）.
       function:具有灵活性。
-->

<!--1.2实例-->
<!--<html>-->
<!--<head>-->
    <!--<title>Filters in Action</title>-->
<!--</head>-->
<!--<body ng-app="filtersApp">-->
<!--<div ng-controller="FilterCtrl as ctrl">-->
   <!--<div>-->
       <!--Amount as a number:{{ctrl.amount | number}}-->
   <!--</div>-->
    <!--<div>-->
       <!--Amount as a number:{{ctrl.amount | number:4}}-->
   <!--</div>-->
    <!--<div>-->
        <!--Total Cost as a currency:{{ctrl.totalCost|currency}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Total Cost in INR:{{ctrl.totalCost|currency:'&#163'}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Shouting the name:{{ctrl.name|uppercase}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Whispering the name:{{ctrl.name|lowercase}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Start Time:{{ctrl.startTime|date:'medium'}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Start Time:{{ctrl.startTime|date:'short'}}-->
    <!--</div>-->
    <!--<div>-->
        <!--Start Time:{{ctrl.startTime}}&lt;!&ndash;长整型格式的时间&ndash;&gt;-->
    <!--</div>-->
    <!--<div>-->
        <!--Start Time:{{ctrl.startTime|date:'M/dd,yyyy'}}-->
    <!--</div>-->
    <!--<div>-->
        <!--The Json Filter:{{ctrl.obj|json}}-->
    <!--</div>-->
<!--</div>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>-->
<!--<script>-->
    <!--angular.module('filtersApp',[])//AngularJS中module函数的第一个参数代表了模块名称，第二个参数是一个数组，表示该模块所依赖的模块名称列表。-->
            <!--.controller('FilterCtrl',[function () {-->
                <!--this.amount=1024;-->
                <!--this.totalCost=4906;-->
                <!--this.name='Shyam Seshadri';-->
                <!--this.startTime=new Date().getTime();-->
                <!--this.obj={test:'value',num:123}-->

            <!--}]);-->
<!--</script>-->
<!--</body>-->
<!--</html>-->

<!--1.3实例-->
<html>
<head>
    <title>Filters in Action</title>
</head>
<body ng-app="filtersApp">
<div ng-controller="FilterCtrl as ctrl">
    <button ng-click="ctrl.currentFilter='string'">Filter with String</button>
    <button ng-click="ctrl.currentFilter='object'">Filter with Object</button>
    <button ng-click="ctrl.currentFilter='function'">Filter with Function</button>
    Filter Text
    <input type="text" ng-model="ctrl.filterOptions['string']">Show Done Only
    <input type="checkbox" ng-model="ctrl.filterOptions['object'].done">
    <ul>
        <li ng-repeat="note in ctrl.notes | filter:ctrl.filterOptions[ctrl.currentFilter]|orderBy:ctrl.sortOrder|limitTo:5"><!--最多保留5个元素-->
            {{note.label}}-{{note.type}}-{{note.done}}
        </li>
    </ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
    angular.module('filtersApp',[])
            .controller('FilterCtrl',[function () {
                this.notes=[
                    {label:'FC Todo',type:'chore',done:false},
                    {label:'FT Todo',type:'task',done:false},
                    {label:'FFC Todo',type:'fun',done:true},
                    {label:'SC Todo',type:'chore',done:false},
                    {label:'ST Todo',type:'task',done:true},
                    {label:'SF Todo',type:'fun',done:true},
                    {label:'TC Todo',type:'chore',done:false},
                    {label:'TT Todo',type:'task',done:false},
                    {label:'TF Todo',type:'fun',done:false},
                ];
                this.sortOrder=['+type','-label'];//先通过type来排列数组，如果相同，再通过label降序排列。
                this.filterOptions={
                    "string":'',
                    "object":{done:false,label:'c'},
                    "function":function (note) {
                        return note.type==='task'&&note.done===false;
                    }
                };
                this.currentFilter='string';
            }])
// 在控制器和服务器中使用过滤器
//任何过滤器，无论是内置的还是自定义的，都可以通过在名称中添加"Fiter"这个后缀并请求注入到服务和控制器中。eg：
//angular.module('myModule',[])
//.controller('MyCtrl',['currencyFilter',function(currencyFilter){}])

            .controller('FilterCtrl',['filterFilter',function (filterFilter) {
                this.notes=[
                    {label:'FC Todo',type:'chore',done:false},
                    {label:'FT Todo',type:'task',done:false},
                    {label:'FFC Todo',type:'fun',done:true},
                    {label:'SC Todo',type:'chore',done:false},
                    {label:'ST Todo',type:'task',done:true},
                    {label:'SF Todo',type:'fun',done:true},
                    {label:'TC Todo',type:'chore',done:false},
                    {label:'TT Todo',type:'task',done:false},
                    {label:'TF Todo',type:'fun',done:false},
                ];
                console.log(filterFilter(this.notes,'fun'));
            }]);

</script>
</body>
</html>

<!--创建AngularJS自定义过滤器

每一个过滤器都会返回一个函数，当进行过滤时该函数会被调用。传入的参数会在函数被调用时指定。
如果想传入可选参数，只需要在返回的函数中增加相应的参数定义。需要传多个参数格式如下：
return function(ts,arg1,arg2,arg3){}
{{ctrl.startTime|timeAgo:arg1:arg2:arg3}}
需要传入一个布尔型参数
return function(ts,ignoreSeconds){}
{{ctrl.startTime|timeAgo:true}}

-->
<html>
<head>
    <title>Custom Filters in Action</title>
</head>
<body ng-app="filtersApp">
<div ng-controller="FilterCtrl as ctrl">
<div>
    Start Time(Timestamp):{{ctrl.startTime}}
</div>
<div>
    Start Time(DateTime):{{ctrl.startTime|date:'medium'}}
</div>
<div>
    Start Time(Our filter):{{ctrl.startTime|timeAgo}}
</div>
<div>
    Start Time(Our filter):{{ctrl.someTimeAgo|timeAgo}}
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
    angular.module('filtersApp',[])
            .controller('FilterCtrl',[function () {
                this.startTime=new Date().getTime();
                this.someTimeAgo=new Date().getTime()-(1000*60*60*4);
            }])
            .filter('timeAgo',[function () {
                var ONE_MINUTE=1000*60;
                var ONE_HOUR=ONE_MINUTE*60;
                var ONE_DAY=ONE_HOUR*24;
                var ONE_MONTH=ONE_DAY*30;
                return function(ts){
                    var currentTime=new Date().getTime();
                    var diff=currentTime-ts;
                    if(diff<ONE_MINUTE){
                        return 'seconds ago';
                    }else if(diff<ONE_DAY){
                        return 'hours ago';
                    }else if(diff<ONE_MONTH){
                        return 'days ago';
                    }else{
                        return 'months ago';
                    }
                }
            }])
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3161974/blog/1354166

chenggou9601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS过滤器介绍

<!--与过滤器共舞1.1 AngularJS过滤器介绍AngularJS的过滤器用于处理数据以及将数据格式化后呈现给用户。可以通过HTML中的表达式来使用他们，也可以直接作用于控制器或服务中的数据。大部分情况下，过滤器处于数据传递链上的最后一环，将数据转换为用户熟悉的格式。最常见...
复制链接

扫一扫