《AngularJS实战》——3.1 模板中的过滤器

3.1 模板中的过滤器

过滤器的主要功能是格式化数据,这里所说的数据,既包括视图模板中的表达式,也包括控制器中的数组或对象。开发人员不仅可以方便地调用Angular中提供的过滤器,还可以自定义属于自己的过滤器。接下来,我们通过一些实用的案例,来介绍过滤器的强大功能。

3.1.1 排序方式过滤

在介绍排序(orderBy)过滤器之前,先来了解一下过滤器的使用格式。在Angular中,过滤器有3种调用方式,分别为单个过滤器、多个过滤器和带参数的过滤器,它们分别对应不同的使用格式,下面分别进行介绍。
1.?单个过滤器
单个过滤器常用于视图模板的表达中,它的使用格式非常简单,调用格式如下所示。
{{表达式 | 过滤器名}}
在上述代码中,“{{}}”双花括号为表达式标记,在括号中,“|”为管道符,通过该符号分成前后两部分,前部分为需要被格式化的表达式,后部分为过滤器的名称,示例代码如下。
{{8.88 | currency}}
代码执行后的结果为:$8.88,即在表达式前添加了一个“$”符号。在上述代码中,数值8.88为表达式,而currency则为货币过滤器。
2.?多个过滤器
在视图模板的表达式中,除使用单个过滤器之外,还可以同时调用多个过滤器,格式如下。
{{表达式 | 过滤器名1 | 过滤器名2 | ...}}
在上述代码中,多个过滤器名使用管道符“|”隔开,其他内容与单个过滤器的使用方法相同。
3.?带参数过滤器
当然,无论是单个过滤器还是多个过滤器,它们都可以在调用时带参数,调用格式如下。
{{表达式 | 过滤器名1 :参数1 :参数2 :...}}
在上述代码中,过滤器的参数跟随在过滤器名称的后面,通过“:”来进行识别,多个参数之间使用“:”进行分隔,多个过滤器同样可以带多个参数,示例代码如下。
{{8.8800 | number:1}}
代码执行后的结果为8.9,虽然表达式值中有4位小数,但由于“number”过滤器中小数位的参数值为1,因此,在显示时只能保留一位。在保留时,按四舍五入的方式进行舍取,所以,最终数值8.8800经过过滤器格式化后,变成8.9。
在介绍完过滤器的多个调用格式之后,我们再来详细说明排序过滤器的用法,该过滤器的功能是按指定的一个或多个对象属性名称进行数据过滤的,通过排序过滤器,不仅可以获取按照指定属性名称排序后的数据,而且还能通过过滤器设置数据返回时的记录总数量。
接下来,我们通过一个完整的示例来演示排序过滤器使用的过程。
示例3-1 排序方式过滤
(1)功能描述
在页面的视图模板中,调用排序过滤器,将显示的数据按“score”属性值降序进行排列,并且只显示前3条数据记录。
(2)实现代码
新建一个HTML文件3-1.html,加入如代码清单3-1所示的代码。
代码清单3-1 排序方式过滤

<!doctype html>
<html ng-app="a3_1">
<head>
    <title>排序(orderBy)方式过滤</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }
            ul li {
                f?loat: left;
                padding: 5px 0px;
            }
            ul .odd {
                color: #0026ff;
            }
            ul .even {
                color: #ff0000;
            }
            ul .bold {
                font-weight: bold;
            }
            ul li span {
                width: 52px;
                f?loat: left;
                padding: 0px 10px;
            }
            ul .focus {
                background-color: #cccccc;
            }
    </style>
</head>
<body>
    <div ng-controller="c3_1">
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>年龄</span>
                <span>分数</span>
            </li>
            <li ng-repeat=" stu in data | orderBy: '-score'
                        | limitTo: 3"
                ng-class-odd="'odd'"
                ng-class-even="'even'">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a3_1 = angular.module('a3_1', []);
        a3_1.controller('c3_1', ['$scope', function ($scope) {
            $scope.bold = "bold";
            $scope.data = [
            { name: "张明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "刘小华", sex: "男", age: 28, score: 86 },
            { name: "陈忠忠", sex: "男", age: 23, score: 97 }
            ];
        }]);
    </script>
</body>
</html>

(3)页面效果
执行HTML文件3-1.html,最终实现的页面效果如图3-1所示。

(4)源码分析
在本示例的源码中,当视图中的模板通过“ng-repeat”指令绑定控制器中的数据时,调用了orderBy过滤器,代码如下所示。

stu in data | orderBy: '-score' | limitTo: 3

在上述代码中,第一个管道符“|”的左侧为控制器中的数组data,右侧为过滤器的名称“orderBy”,表示排序过滤器,紧接着的冒号右侧为该过滤器调用时的参数,“-score”为排序时指定的属性名称,即按该属性名排序,默认时为升序,在属性名前添加“-”符号后,则变为降序。
第二个管道符“|”的右侧为过滤器的名称“limitTo”,用于设置数据显示时的记录总量,具体的总量值通过冒号后的参数值来指定,本示例为3,表示只显示3条记录。

3.1.2 匹配方式过滤

与排序方式不同,匹配方式是将字符参数与列表中的各个成员属性值相匹配,如果包含该字符参数值,则显示该条列表记录。匹配时,不区分字符的大小写。常见的匹配方式有下列几种。
1.?通过f?ilter过滤器直接匹配包含字符参数的数据
这种方式只需要在调用f?ilter过滤器时,添加一个需要匹配的字符参数,调用格式如下。
{{数据 | f?ilter:'匹配字符'}}
在上述调用格式代码中,匹配字符是过滤器f?ilter的参数,一旦添加该参数之后,将在整个数据的属性中查找匹配项,找到后,则显示,否则不显示。字符内容必须加引号,如以下代码所示。

{{data | f?ilter:80}}

上述代码表示,在data数据的各个属性中,查找包含“80”内容的记录。
2.?在字符参数中使用对象形式匹配指定属性的数据
如果在过滤数据时已经明确了数据匹配的属性范围,也可以在字符参数中通过对象的形式指定匹配的属性名称,调用格式如下。
{{数据 | f?ilter:对象}}
在上述调用格式的对象中,过滤器参数是一个对象,通过key/value方式声明属性名称和匹配的字符内容,如果属性名称为“$”,则表示在全部属性中查找,代码如下。

{{data | f?ilter:{score:80}}}和{{data | f?ilter:{$:80}}}

在上述代码中,前者仅是在“score”属性列中匹配值为80的数据记录,后者则是在全部属性列中匹配数据记录,后者相当于下列代码。

{{data | f?ilter:80}}

3.?在字符参数中使用自定义函数匹配相应数据
在f?ilter过滤器的字符参数中,除使用对象外,还可以直接调用自定义的函数名,处理相对复杂的数据匹配情况,调用格式如下。
{{数据 | f?ilter:函数名称}}
在上述调用格式中,过滤器的参数为函数名称,即自定义的匹配数据的函数名。接下来,通过一个完整的示例来介绍在f?ilter过滤器的形参中,使用自定义函数来匹配数据的过程。
示例3-2 匹配方式过滤
(1)功能描述
在示例3-1的基础上,调用匹配过滤器,查询“score”属性值大于85且小于90的数据记录,并将数据显示在视图模板中。
(2)实现代码
新建一个HTML文件3-2.html,加入如代码清单3-2所示的代码。
代码清单3-2 匹配方式过滤

<!doctype html>
<html ng-app="a3_2">
<head>
    <title>匹配(f?ilter)方式过滤</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }
            ul li {
                f?loat: left;
                padding: 5px 0px;
            }
            ul .odd {
                color: #0026ff;
            }
            ul .even {
                color: #ff0000;
            }
            ul .bold {
                font-weight: bold;
            }
            ul li span {
                width: 52px;
                f?loat: left;
                padding: 0px 10px;
            }
            ul .focus {
                background-color: #cccccc;
            }
    </style>
</head>
<body>
    <div ng-controller="c3_2">
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>年龄</span>
                <span>分数</span>
            </li>
            <li ng-repeat=" stu in data | f?ilter:f?indscore"
                ng-class-odd="'odd'"
                ng-class-even="'even'">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a3_2 = angular.module('a3_2', []);
        a3_2.controller('c3_2', ['$scope', function ($scope) {
            $scope.bold = "bold";
            $scope.data = [
            { name: "张明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "刘小华", sex: "男", age: 28, score: 86 },
            { name: "陈忠忠", sex: "男", age: 23, score: 97 }
            ];
            $scope.f?indscore = function (e) {
                return e.score > 85 && e.score < 90;
            }
        }]);
    </script>
</body>
</html>

(3)页面效果
执行HTML文件3-2.html,最终实现的页面效果如图3-2所示。

(4)源码分析
在本示例的源代码中,为了查找“分数”在85到90之间的数据,在示例的控制器代码中,先添加了一个名为f?indscore的自定义函数,并在添加函数时,定义了一个名为“e”的形参,该形参的值为数据源对象;然后,根据这个数据源对象中的“score”属性值,通过逻辑运算符返回“分数”在85到90之间的记录数据。
最后,在本示例中的视图模板中,当通过f?ilter过滤器匹配数据时,直接将f?indscore函数名作为过滤器的参数,此时,“data”对象已作为实参自动传递给f?indscore函数的形参“e”中,函数接收后,根据“data”对象中的“score”属性值,将“分数”在85到90之间的数据显示在视图的模板中。

3.1.3 自定义过滤器

除调用Angular中自带的过滤器外,还可以自己定义过滤器。定义过滤器的方法很简单,只需要在页面模块中注册一个过滤器的构造方法,该方法将返回一个以输入值为首个参数的函数,在函数体中实现过滤器的功能。接下来,我们通过一个完整的示例来演示自定义过滤器的过程。
示例3-3 自定义过滤器
(1)功能描述
在示例3-1的基础上,调用自定义的过滤器,查询“age”属性值大于22且小于28的可选性别的数据记录,并将数据显示视图模板中。
(2)实现代码
新建一个HTML文件3-3.html,加入如代码清单3-3所示的代码。
代码清单3-3 自定义过滤器

<!doctype html>
<html ng-app="a3_3">
<head>
    <title>自定义过滤器</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }
            ul li {
                f?loat: left;
                padding: 5px 0px;
            }
            ul .odd {
                color: #0026ff;
            }
            ul .even {
                color: #ff0000;
            }
            ul .bold {
                font-weight: bold;
            }

            ul li span {
                width: 52px;
                f?loat: left;
                padding: 0px 10px;
            }
            ul .focus {
                background-color: #cccccc;
            }
    </style>
</head>
<body>
    <div ng-controller="c3_3">
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>年龄</span>
                <span>分数</span>
            </li>
            <li ng-repeat=" stu in data | young:0"
                ng-class-odd="'odd'"
                ng-class-even="'even'">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a3_3 = angular.module('a3_3', []);
        a3_3.controller('c3_3', ['$scope', function ($scope) {
            $scope.bold = "bold";
            $scope.data = [
            { name: "张明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "刘小华", sex: "男", age: 28, score: 86 },
            { name: "陈忠忠", sex: "男", age: 23, score: 97 }
            ];
        }]);
        a3_3.f?ilter('young', function () {
            return function (e, type) {
                var _out = [];
                var _sex = type ? "男" : "女";
                for (var i = 0; i < e.length; i++) {
                    if (e[i].age > 22 && e[i].age < 28 &&
                        e[i].sex == _sex)
                        _out.push(e[i]);
                }
                return _out;
            }
        });
    </script>
</body>
</html>

(3)页面效果
执行HTML文件3-3.html,最终实现的页面效果如图3-3所示。
(4)源码分析
在本示例的控制器代码中,为了实现开发需求,先通过页面模块“a3_3”调用“f?ilter”方法,创建了一个名为“young”的自定义过滤器,该过滤器将通过return语句返回一个函数。在函数体中,通过代码编写,实现对应需求的功能开发。接下来,我们重点分析一下这个返回的函数。
首先,在这个函数中,定义了两个形参“e”和“type”,前者“e”参数在调用过滤器时,将会被需要过滤的数据自动注入,关于自动注入的概念,将会在第4章中进行详细介绍。后者“type”参数,将会在调用过滤器时,通过冒号形式向过滤器传递实参。

其次,在函数体中,由于本示例过滤的数据是一个数组,因此,先定义一个名为“_out”的空数组,并将传来的“type”性别类型参数进行字符转化,保存在变量“_sex”中;然后,对自动注入的“e”数组中的数据进行遍历,在遍历过程中,检测各项元素的“年龄”属性值是否在“22~28”范围之间,并且“性别”属性值是否与变量“_sex”相符。如果这两项条件都满足,则将该项数组元素添加至空数组“_out”中,其核心代码如下所示。
...省略部分代码

var _out = [];
var _sex = type ? "男" : "女";
for (var i = 0; i < e.length; i++) {
     if (e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex)
         _out.push(e[i]);
}
...省略部分代码

最后,在函数体结束时,通过调用return语句,将包含符合过滤条件数据的数组“_out”返回给自定义过滤器“young”。当在视图模块中调用过滤器“young”时,将执行返回函数体中代码,并返回符合条件的数据,最终实现根据需求过滤数据的功能。

时间: 2025-01-01 15:30:01

《AngularJS实战》——3.1 模板中的过滤器的相关文章

《AngularJS实战》——导读

前 言 为何写作本书 随着互联网技术的发展,尤其是移动互联网技术的兴起和迅速壮大,前端应用的开发并非简单静态页的制作,越来越多的功能复杂的动态应用由前端来完成.但是,在实现的过程中,前端技术自身有许多的不足,很难实现某些复杂功能.为克服自身的不足,往往需要借助一些常用的类库和框架,如jQuery和Backbone等,但这些外部引入的类库或框架只方便了代码开发,并未从根本上改变页面结构.为了从根本上克服静态页在应用开发过程中的不足,我们引入了AngularJS框架. AngularJS是目前最热门

《AngularJS实战》——第2章 Angular基础知识

第2章 Angular基础知识通过上一章对Angular的简单介绍,相信读者对使用Angular开发Web应用有了一个大致的了解.由于Angular是一个全新的开发工具,因此需要掌握许多必要的基础概念.本章将从最底层的知识讲起,由浅入深地带领大家了解并掌握Angular开发工具中的表达式.控制器.模板和模板中的过滤器这些必须了解的基础知识.

详解AngularJS中自定义过滤器_AngularJS

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

AngularJS中的过滤器使用详解

  这篇文章主要介绍了AngularJS中的过滤器使用详解,过滤器是AngularJS中处理文本的一个非常有用的功能,需要的朋友可以参考下 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. 小写过滤器 添加小写的过滤器,使用管道符的表达式.在这里添加小写过滤器,以小写字母打印学生姓名. ? 1 2 3 Enter first name:<input type="text" ng-model="student.firstNam

《AngularJS实战》——3.2 过滤器的应用

3.2 过滤器的应用 在上一节介绍完过滤器在视图模板中的基本用法后,考虑到它在Angular中格式化数据的重要性,在本节中,我们再分别介绍两个使用过滤器功能应用--表头排序和字符查找,进一步巩固上一小节中所学的过滤器基础知识,掌握过滤器在应用开发中的使用方法. 3.2.1 表头排序 表头排序是指在使用列表方式显示数据时,用户如果单击列表中某列的表头元素,那么,列表中的全部数据将会自动按该列的属性值自动排序,默认为升序排列,再次单击该列表头元素时,则又变为降序,通过这种方式显示数据,可以快速定位所

《AngularJS实战》——第3章 Angular的过滤器和作用域

第3章 Angular的过滤器和作用域在第2章介绍完Angular中的基础知识后,我们将在本章中进一步介绍Angular的另外两个重要的概念--过滤器和作用域.过滤器的功能是格式化数据表达式,只要有数据表达式的地方就可以使用过滤器,如页面模板视图.控制器,在服务中都可能使用过滤器,并且还可以自定义过滤器.与过滤器单一的功能不同,作用域(scope)是Angular中的另一个非常重要的概念,它主要服务于页面模板,在控制器与页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性.在本章

ThinkPHP 3.2 模板中的Angularjs 的变量{{$first}} 无法被解析

ThinkPHP 3.2 模板中的Angularjs 的变量"{{$first}}" 无法被解析, 模板解析冲突,例如在angularjs 的变量"{{$first}}",则TP模板不会解析该变量的 <li ng-repeat="(k,v) in data" style="{{$odd?'color:red':''}}"> ID:{{v.user_id}} 用户名:{{v.username}} IP地址:{{v.l

《AngularJS实战》——2.1  Angular中的表达式

2.1 Angular中的表达式 在Angular中,表达式是运用在视图中的一个段代码,例如在第1章的示例1-2中,在计算两个数据的和时,双花括号中就是一个数值表达式,其中的值是通过调用$parse服务模块进行解析的.如果需要格式化表达式中的值,也可以调用Angular中的过滤器,例如在第1章示例1-2中,管道符"|"之后的"number:0"则调用了整数型过滤器. 2.1.1 Angular表达式与JavaScript表达式的区别 虽然都是表达式,但Angular

Yii控制器中filter过滤器用法分析_php实例

本文实例讲述了Yii控制器中filter过滤器用法.分享给大家供大家参考,具体如下: 指定过滤动作,(如下projectContext()方法在新建,列表,管理页面调用时使用) public function filters() { return array( 'accessControl', // perform access control for CRUD operations 'postOnly + delete', // we only allow deletion via POST