本网站只能被运行在支持JavaScript脚本的环境中

第七节 过滤器

本节介绍AngularJs中的各种过滤器。通过过滤器的使用可以直接实现很多功能,不需要再另外书写代码。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.money = 1000;
});
</script>
</head>
<body ng-controller="SampleController">
<h1>{{money | currency}}</h1>
</body>
</html>

过滤器采用{{value | filter}}的形式。

currenty过滤器用于显示货币(默认为美元)

有时需要向过滤器中传入参数,这时可以采用{{value | filter:param1:param2}}的格式,参数与参数之间采用:分隔符。

过滤器参数值可以为AngularJS表达式。

标准过滤器

filter

格式

{{ filter_expression | filter : expression : comparator }}

该过滤器用于从数组中抽出符合条件的元素

将表达式指定为字符串

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.array1 = ["hoge", "fuga", "piyo"];
    $scope.array2 = [
        "hoge",
        "fuga",
        {a: "hoge"},
        {a: "fuga"},
        {b: {c: "hoge"}},
        {b: {c: "fuga"}},
    ];
});
</script>
</head>
<body ng-controller="SampleController">
<pre>{{array1 | filter:"g" | json}}</pre>
<pre>{{array2 | filter:"h" | json}}</pre>
</body>
</html>

当将表达式指定为字符串时,抽取符合以下条件的元素:

  • 包含指定字符串的字符串元素
  • 属性值字符串中包含指定字符串的对象及符合过滤条件的属性值

可以在字符串开头添加“!”来指定否定条件(抽取不包含指定字符串的元素)。

将表达式指定为对象

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.physicists = [
        {firstName: 'Johannes', lastName: 'Kepler'},
        {firstName: 'Galileo',  lastName: 'Galilei'},
        {firstName: 'Thomas',   lastName: 'Young'},
        {firstName: 'Michael',  lastName: 'Faraday'},
        {firstName: 'Edward',   lastName: 'Morley'},
        {firstName: 'Niels',    lastName: 'Bohr'}
    ];
});
</script>
</head>
<body ng-controller="SampleController">
<ul>
    <li ng-repeat="physicist in physicists | filter:{firstName:'e', lastName: 'l'}">
    {{physicist.firstName}} {{physicist.lastName}}
    </li>
</ul>
</body>
</html>

当将表达式指定为对象时,针对指定对象的所有属性值,抽取出数组中所有属性值包含指定的属性值文字的对象。

将表达式指定为函数

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.isEvenNumber = function(number) {
        return number % 2 == 0;
    };
});
</script>
</head>
<body ng-controller="SampleController">
{{[1, 2, 3, 4, 5] | filter:isEvenNumber}}
</body>
</html>

当将表达式指定为函数时,针对数组中各元素使用函数,如果函数值返回true则抽取该元素。

使用比较器定义抽取条件

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.contains = function(actual, expected) {
        return actual.indexOf(expected) != -1;
    };
});
</script>
</head>
<body ng-controller="SampleController">
<p>{{["a", "A", "ab", "c"] | filter:"a":true}}
<p>{{["a", "A", "ab", "c"] | filter:"a":false}}
<p>{{["a", "A", "ab", "c"] | filter:"a":contains}}
</body>
</html>

可以通过比较器来指定元素值与期望值的比较条件。

  • 当指定为false(默认)时,不区分大小写,抽取包含指定字符串的元素。
  • 当指定为true时,抽取完全等于指定字符串的元素。
  • 当指定为函数时,对元素应用函数,抽取函数返回值为true的元素。

currency

格式

{{ currency_expression | currency : symbol }}

使用示例

{{1000 | currency:"¥"}}

显示结果

¥1,000.00

用于显示货币。可以通过参数来修改符号(默认为$)。

number

格式

{{ number_expression | number : fractionSize }}

使用示例

{{1000 | number:3}}

显示结果

1,000.000

用于显示数值。可以通过参数来指定小数点后保留几位。

date

格式

{{ date_expression | date : format }}

使用示例

<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.date =new Date();
});
<script>
{{date | date:"yyyy/MM/dd HH:mm:ss"}}

显示结果

2015/06/07 18:36:57

用于显示日期及时间。可以通过参数来指定日期格式。

json

格式

{{ json_expression | json }}

使用示例

<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.json = {
        hoge: 'HOGE',
        fuga: {
            a: true,
            b: false
        },
        piyo: [1, 2, 3]
    };
});
<script>
<pre>{{json | json}}</pre>

显示结果

用于显示JavaScript对象的JSON格式的字符串。

lowercase与uppercase

格式

{{ lowercase_expression | lowercase }}
{{ uppercase_expression | uppercase }}

使用示例

<p>{{"HOGE" | lowercase}}</p>
<p>{{"fuga" | uppercase}}</p>

显示结果

hoge
FUGA

用于显示文字的全小写形式或全大写形式。

limitTo

格式

{{ limitTo_expression | limitTo : limit }}

使用示例

<p>{{[1, 22, 333, 4444] | limitTo:3}}</p>
<p>{{"aBcDeFg" | limitTo:4}}</p>
<p>{{[1, 22, 333, 4444] | limitTo:-3}}</p>
<p>{{"aBcDeFg" | limitTo:-4}}</p>

显示结果

[1,22,333]
aBcD
[22,333,4444]
DeFg

用于限定从开头开始抽取的数组中的元素个数或字符串中的文字个数。

如果参数值被指定为负数,限定从结尾处向前抽取的数组中的元素个数或字符串中的文字个数。

当参数值大于数组中元素个数或字符串中的字符数时,不会抛出错误,抽取全部元素或文字。

可以与ng-repeat内置指令结合使用。

<ul>
    <li ng-repeat="value in [1, 2, 3, 4, 5] | limitTo : 3">{{value}}</li>
</ul>

orderBy

格式

{{ orderBy_expression | orderBy : expression : reverse }}

将表达式指定为函数

<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.values = [
        {name: 'taro',    age: 15},
        {name: 'takeshi', age: 12},
        {name: 'takuya',  age: 17}
    ];

    $scope.myFunction = function(value) {
        return value.age;
    };
});
</script>
<ul>
    <li ng-repeat="value in values | orderBy:myFunction">{{value.name}}({{value.age}})</li>
</ul>

显示结果

对数组中各元素应用函数,获取用于排序的标准。

将表达式指定为字符串

<ul>
    <li ng-repeat="value in values | orderBy:'age'">{{value.name}}({{value.age}})</li>
</ul>

如果将表达式指定为字符串,该字符串直接指定用于排序的对象属性值。

如果指定-age格式,排序将变为降序。

将表达式指定为数组

使用示例

<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.values = [
        {name: 'taro',    age: 15, height: 165},
        {name: 'takeshi', age: 12, height: 155},
        {name: 'taichi',  age: 15, height: 160},
        {name: 'takuya',  age: 17, height: 170}
    ];
});
</script>
<ul>
    <li ng-repeat="value in values | orderBy:['age', 'height']">
        {{value.name}}({{value.age}})({{value.height}} cm)
    </li>
</ul>

显示结果

如果将表达式指定为数组,可以指定多个排序标准。

表达式数组中各元素可以为字符串或函数。

自定义过滤器

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.filter('myFilter',function(){
    return function(value, param1, param2) {
        return param1 + value + param2;
    };
});
</script>
</head>
<body>
<h1>{{"hoge" | myFilter:"<":">"}}</h1>
</body>
</html>

显示结果

可以通过模块的filter方法自定义过滤器。

在自定义过滤器函数中,第一个参数值为被传入过滤器的值,第二个参数值为被传入过滤器的各参数值。

使用多个过滤器

使用示例:

<pre>{{["hoge", "fuga", "piyo"] | filter:"g" | json}}</pre>

显示结果

[
  "hoge",
  "fuga"
]

可以同时使用多个过滤器,过滤器与过滤器之间使用|进行连接。

在脚本代码中使用过滤器

var myApp = angular.module('myApp', []);
myApp.run(function($filter){
    var filter=$filter('json');
    var str=filter({name:'Taro',age:17});
    console.log(str);
});

控制台中的输出结果

{
  "name": "Taro",
  "age": 17
}

如果在$filter()函数中传入过滤器名,可以获取该过滤器函数。

本地化

获取i18n文件

可以从AngularJS官网下载AngularJS压缩包,其中包含了i18n文件夹。在该文件夹中,包含了各国用本地化文件。

读取i18n文件

可以从AngularJS官网下载AngularJS压缩包,其中包含了i18n文件夹。在该文件夹中,包含了各国用本地化文件。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-locale_zh-cn.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function($scope) {
    $scope.date = new Date();
});
</script>
</head>
<body ng-controller="SampleController">
<h1>{{date | date:"yyyy/MM/dd EEE"}}</h1>
</body>
</html>

显示结果