AngularJS1.X学习笔记7-过滤器

  最近到笔试被虐成狗了,感觉温馨之算法极其死了。但是要先花点事件将此AngularJS学习了。今天读书filter

同一、内置过滤器

  (1)过滤单个数据值

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>内置过滤器-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
    <h1>今天是:{{now|date:"dd MMMM yyyy"}}</h1>
    <table width="100%">

        <tr>
            <td>name</td>
            <td>cat</td>
            <td>price</td>
            <td>expiry</td>
            <td>json</td>
        </tr>

        <tr ng-repeat="item in products">
            <td>{{item.name}}</td>
            <td>{{item.cat | uppercase}}</td>
            <td>{{item.price | currency:"¥"}}</td>
            <td>{{item.expiry | number:0}}</td>
            <td>{{item | json}}</td>
        </tr>
    </table>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("tableCtrl",function($scope){
            $scope.products = [
                {name:"苹果",cat:"水果",price:5.0,expiry:100000000},
                {name:"香蕉",cat:"水果",price:6.0,expiry:9},
                {name:"桃子",cat:"水果",price:7.0,expiry:7},

                {name:"22",cat:"yy",price:5.0,expiry:5},
                {name:"33",cat:"yy",price:9.0,expiry:6},
                {name:"44",cat:"yy",price:4.0,expiry:2},
                {name:"55",cat:"yy",price:8.0,expiry:4},

                {name:"ww",cat:"tt",price:4.0,expiry:7},
                {name:"qq",cat:"tt",price:3.0,expiry:9},

            ];

                var now = new Date();
                $scope.now = now;

        });
    </script>

</body>
</html>

 

 

图片 1

   上例被之所以到了常见的坐过滤单个数据值的过滤器,下面一一说明。

  • currency:格式化货币价值,可以于后面加:跟参数,指定货币符号,默认为$
  • number:格式化数字,后面和:加参数,表示保留的有点数位数,它见面在千分为加上逗号
  • date:参数为日期格式,可以将Date对象或毫秒数格式化为指定的格式
  • uppercase:字母大写
  • lowercase:字母小写
  • json:将javascript对象转换为json对象

   (2)过滤集合

  • 限制数量   

  表示无非显示products的前面3只桩,参数为负数表示从今最终一个朝向前方到底。

  •  选取项

  用filter可以过滤出返回true的起,给个函数也是好的,例如下面

<tr ng-repeat="item in products | filter:selectItems">

$scope.selectItems = function(item){
     return item.cat == "tt" || item.cat == "yy";       
}
  • 排序

 

  默认是升序排列,加个-号则降序,当然为足以针对大多只称呼词进行排序,像是法

<tr ng-repeat="item in products | orderBy:['expiry','-price']'">

  注意充分小引号。

次、创建于定义过滤器

  1、单值过滤

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>自定义-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
    <h1>今天是:{{now|date:"dd MMMM yyyy"}}</h1>
    <table width="100%">

        <tr>
            <td>name</td>
            <td>cat</td>
            <td>price</td>
            <td>expiry</td>
            <td>json</td>
        </tr>

        <tr ng-repeat="item in products">
            <td>{{item.name | labelCase:"###"}}</td>
            <td>{{item.cat | uppercase}}</td>
            <td>{{item.price | currency:"¥"}}</td>
            <td>{{item.expiry | number:0}}</td>
            <td>{{item | json}}</td>
        </tr>
    </table>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("tableCtrl",function($scope){
            $scope.products = [
                {name:"苹果",cat:"水果",price:5.0,expiry:100000000},
                {name:"香蕉",cat:"水果",price:6.0,expiry:9},
                {name:"桃子",cat:"水果",price:7.0,expiry:7},

                {name:"22",cat:"yy",price:5.0,expiry:5},
                {name:"33",cat:"yy",price:9.0,expiry:6},
                {name:"44",cat:"yy",price:4.0,expiry:2},
                {name:"55",cat:"yy",price:8.0,expiry:4},

                {name:"ww",cat:"tt",price:4.0,expiry:7},
                {name:"qq",cat:"tt",price:3.0,expiry:9},

            ];

                var now = new Date();
                $scope.now = now;

        })
        .filter("labelCase",function(){
            return function(value,pre){
                if(angular.isString(value)){
                    return pre+value;
                }else{
                    return value;
                }
            }
        });
    </script>

</body>
</html>

  我们因此filter方法创建于定义过滤器,filter方法有三三两两只参数,第一独指定过滤器的称谓,第二个凡是一个工厂函数,在厂函数中回到一个工友函数,工人函数的首先个参数是目前价,其他参数是于定义参数。在本例中定义了一个labelCase过滤器,它的用意是在字符串前面加上从定义的前缀。

  (2)创建一个汇过滤器。

  跟过滤单个值的过滤器差不多,但是其要求传入的凡一个反复组,返回的抑一个数组

  

.filter("skip",function(){
            return function(data,num){
                if(angular.isArray(data)&&angular.isNumber(num)){
                    if(num>data.length || num<1){
                        return data;
                    }else{
                        return data.slice(num);
                    }
                }else{
                    return data;
                }
            }
        });

 

  这个过滤器表示的是超越了开始的几乎只数据项不显得。

  (3)站于巨人之肩上

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>自定义-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
    <h1>今天是:{{now|date:"dd MMMM yyyy"}}</h1>
    <table width="100%">

        <tr>
            <td>name</td>
            <td>cat</td>
            <td>price</td>
            <td>expiry</td>
            <td>json</td>
        </tr>

        <tr ng-repeat="item in products">
            <td>{{item.name | labelCase2:"###":"@@@"}}</td>
            <td>{{item.cat | uppercase}}</td>
            <td>{{item.price | currency:"¥"}}</td>
            <td>{{item.expiry | number:0}}</td>
            <td>{{item | json}}</td>
        </tr>
    </table>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("tableCtrl",function($scope){
            $scope.products = [
                {name:"苹果",cat:"水果",price:5.0,expiry:100000000},
                {name:"香蕉",cat:"水果",price:6.0,expiry:9},
                {name:"桃子",cat:"水果",price:7.0,expiry:7},

                {name:"22",cat:"yy",price:5.0,expiry:5},
                {name:"33",cat:"yy",price:9.0,expiry:6},
                {name:"44",cat:"yy",price:4.0,expiry:2},
                {name:"55",cat:"yy",price:8.0,expiry:4},

                {name:"ww",cat:"tt",price:4.0,expiry:7},
                {name:"qq",cat:"tt",price:3.0,expiry:9},

            ];

                var now = new Date();
                $scope.now = now;

        })
        .filter("labelCase",function(){
            return function(value,pre){
                if(angular.isString(value)){
                    return pre+value;
                }else{
                    return value;
                }
            }
        })
        .filter("labelCase2",function($filter){
            return function(value,pre,end){
                return $filter('labelCase')(value,pre)+end;
            }
        });
    </script>

</body>
</html>

  原来描绘了一个labelCase,以这个为根基写了一个labelCase2,
使之可又丰富前缀和后缀。由此可见我是巨人(标题是立在巨人之肩膀上)。

  至此,过滤器就仿照了了。感觉过滤器虽然比较简单,但是图不略,它好方便的吃同一数据模型有例外之表现形式,非常灵活。

相关文章