本篇文章参考自AngularJS基础教程。
1.简介
AngularJS过滤器能够用来格式化数据，过滤器能够用在表达式和指令中，也能够注入到其他地方进行使用。AngularJS提供了9种常用的内置过滤器，我们还可以创建自定义过滤器来格式数据，以完成更多个性化的要求。
2.使用方式
下面是过滤器的三种使用方式，形式如下。
- 在表达式中使用
{{ text | uppercase }} //将字符串text大写输出
{{ money | currency:"￥" }} //将数字money以人民币形式输出- 在属性中使用
<div ng-repeat="number in numbers|limitTo:2">
{{ number }}
</div>- 注入
注入$filter服务，使用$filter(“过滤器名”)就可以获取到相应的过滤器函数了，可以将对应的函数打印出来查看用法。
app.controller("myController", function ($scope,$filter) {
$scope.numbers = ["1","2","3","4"];
console.log($filter('limitTo')($scope.numbers,2,1)); //["2","3"]
});３.内置过滤器
下面是AngularJS中九种内置服务的简单介绍。
| 过滤器名称 | 含义 | 额外参数 |
|---|---|---|
| uppercase | 可以把对应字符串中的字母全部换成大写字母。 | 无 |
| lowercase | 可以把对应字符串中的字母全部换成小写字母。 | 无 |
| currency | 可以把对应数字格式化为货币形式，默认是美元符号。 | 可传递一个字符指定自己需要的符号，如￥。 |
| date | 对日期进行格式化。 | 可传递一个字符串，指明想要的日期格式。 |
| filter | 可以从对应的数组中选出满足要求的元素按原来的顺序组成一个新的数组。 | 可以传递一个字符串，一个对象或一个函数指明选择的要求。 |
| json | 可以将一个JSON或JavaScript对象转换成字符串，在调试时将其输出非常方便。 | 无 |
| limitTo | 可以截取数组或字符串。 | 可传递一个整数表明想截取的片段。 |
| number | 可将数字加上千位分割符。 | 可传入一个整数控制小数点后截取的位数。 |
| orderBy | 可以对指定的数组进行排序。 | 第一个参数是必须的，可以传递一个字符串，一个数组或一个函数用来指明排序的方式。第二个参数是可选的，用来控制是否逆序。 |
AngularJS的内置服务都比较简单，我们演示一下上面比较易理解的uppercase，lowercase，currency，number。
<body ng-app="myApp" ng-controller="myController">
<p>{{ string | uppercase }}</p>
<p>{{ string | lowercase }}</p>
<p>{{ number | currency }}</p>
<p>{{ number | currency:"￥" }}</p>
<p>{{ number | number }}</p>
<p>{{ number | number:2 }}</p>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.string = "Test";
$scope.number = "123456.789";
});
</script>
</body>
接下来我们重点讲解json，date，filter，limitTo，orderBy这五个过滤器。
- json
下面这个例子演示了将JavaScript和JSON对象转为字符串，可以很轻松的打印出来查看，可以看到如果对象里面还有对象和数组，不方便直接查看。
<body ng-app="myApp" ng-controller="myController">
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope,$filter,$http) {
$scope.JSObject = {
name:["张三","李四","王五"],
age:[15,16,17]
};
console.log($scope.JSObject);
console.log($filter('json')($scope.JSObject));
var promise = $http.get("http://localhost:3000/resource");
promise.then(function (response) {
$scope.JsonObject = response.data;
console.log($scope.JsonObject);
console.log($filter('json')($scope.JsonObject));
});
});
</script>
</body>
- date
该过滤器提供了几种常用的日期格式，我们传进对应的参数即可使用。
<body ng-app="myApp" ng-controller="myController">
<p>{{ date }}</p>
<p>{{ date | date:'medium'}}</p>
<p>{{ date | date:'short'}}</p>
<p>{{ date | date:'fullDate'}}</p>
<p>{{ date | date:'longDate'}}</p>
<p>{{ date | date:'mediumDate'}}</p>
<p>{{ date | date:'shortDate'}}</p>
<p>{{ date | date:'shortTime'}}</p>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.date = new Date();
});
</script>
</body>
该过滤器还允许我们自定义日期，我们只需要组合我们想要的格式。
| 格式化类型 | 参数 | 含义 | 效果 |
|---|---|---|---|
| 年份格式化 | yyyy yy y | 四位年份 两位年份 一位年份 | 2016 16 2016 |
| 月份格式化 | MMMM MMM MM M | 英文月份 英文月份简写 固定两位数字月份 整数式数字月份 | August Aug 08 8 |
| 日期格式化 | dd d EEEE EEE | 固定两位数字日期 整数式数字日期 英文星期 英文星期缩写 | 09 9 Thursday Thu |
| 小时格式化 | HH H hh h | 固定两位24小时制 整数式24小时制 固定两位12小时制 整数式十二小时制 | 00 0 12 12 |
| 分钟格式化 | mm m | 固定两位数字分钟 整数式数字分钟 | 08 8 |
| 秒数格式化 | ss s sss | 固定两位数字秒数 整数式数字秒数 毫秒数 | 02 2 .995 |
| 字符格式化 | a Z | 上下午标识 四位时区标识 | AM 0700 |
下面是一个自定义格式日期的演示例子。
<body ng-app="myApp" ng-controller="myController">
<p>{{ date | date:'MMMd,y' }}</p>
<p>{{ date | date:'EEEE,d,M'}}</p>
<p>{{ date | date:'hh:mm:ss.sss'}}</p>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.date = new Date();
});
</script>
</body>
- filter
如前所述，filter第一个参数可以是下列三种类型，第二个参数为true的时候顺序反转。
| 参数类型 | 含义 |
|---|---|
| 字符串 | 返回所有包含这个字符串的元素，在参数最前面加！可以返回所有不含这个字符串的元素 |
| 对象 | 过滤对象的同这个对象中的同名属性进行比较，如果属性值是字符串，就会自动判断是否包含该字符串，使用$当键名即可使用全部属性进行对比。 |
| 函数 | 对每个元素都执行这个函数，返回非假值的元素全都会出现在新数组中。 |
下面是一个简单的例子演示filter过滤器。
<body ng-app="myApp" ng-controller="myController">
过滤出属性值含"el"的水果
<div ng-repeat="fruit in fruits | filter:'el'">
{{ fruit.name }}
</div>
过滤出属性值不含"el"的水果
<div ng-repeat="fruit in fruits | filter:'!el'">
{{ fruit.name }}
</div>
过滤出名字含"el"的水果
<div ng-repeat="fruit in fruits | filter:object">
{{ fruit.name }}
</div>
过滤出重量超过0.2的水果
<div ng-repeat="fruit in fruits | filter:myFunction">
{{ fruit.name }}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.fruits = [
{name:'apple',color:'red',weight:0.2},
{name:'banana',color:'yellow',weight:0.15},
{name:'grape',color:'purple',weight:0.01},
{name:'orange',color:'orange',weight:0.3},
{name:'watermelon',color:'red',weight:1.3}
];
$scope.object = {name:"el"};
$scope.myFunction = function(input) {
return input.weight > 0.2;
};
});
</script>
</body>
- limitTo
limitTo可以让我们截取数组或字符串，不幸的是，只能从头截取或从尾截取，参数中的数字正负表示从头或者从尾，数字大小表示想要的个数，若大于传入的字符串或数组的长度，则等同于不进行任何处理。下面是演示limitTo的一个简单例子。
<body ng-app="myApp" ng-controller="myController">
<div ng-repeat="fruit in fruits | limitTo:-4">
{{ fruit | limitTo:5 }}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.fruits = ['apple','banana','grape','orange','watermelon'];
});
</script>
</body>
- orderBy
如前所述，orderBy参数可以是下面三种类型。
| 参数类型 | 含义 |
|---|---|
| 字符串 | 以该属性名进行排序。 |
| 数组 | 按数组中的属性名依次进行排序，即第一个相同时，比较第二个，依此类推。 |
| 函数 | 按函数返回值的属性名进行排序。 |
下面是一个演示orderBy过滤器的简单例子。
<body ng-app="myApp" ng-controller="myController">
按重量从小到大排序
<div ng-repeat="fruit in fruits | orderBy:'weight'">
{{ fruit.name }}
</div>
按重量从大到小排序
<div ng-repeat="fruit in fruits | orderBy:'weight':true">
{{ fruit.name }}
</div>
按颜色字典序从小到大排序，颜色相同时，按重量从小到大排序
<div ng-repeat="fruit in fruits | orderBy:'array'">
{{ fruit.name }}
</div>
按名字字典序从小到大排序
<div ng-repeat="fruit in fruits | orderBy:'myFunction'">
{{ fruit.name }}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.fruits = [
{name:'apple',color:'red',weight:0.2},
{name:'orange',color:'orange',weight:0.3},
{name:'banana',color:'yellow',weight:0.15},
{name:'grape',color:'purple',weight:0.01},
{name:'watermelon',color:'red',weight:1.3}
];
$scope.array = ["color","weight"];
$scope.myFunction = function() {
return "name";
};
});
</script>
</body>
4.自定义过滤器
显然，AngularJS内置的九种服务并不能满足我们的所有要求，因此AngularJS允许我们自己定义我们需要的过滤器。
模块中的filter方法能够定义一个过滤器，该方法接受两个参数。第一个参数表示过滤器名，第二个参数是一个函数，该函数返回一个过滤器，过滤器本质上是一个会把我们输入的内容当做传入参数的函数，返回值就是对输入参数进行处理后的数据。
如果想定义过滤器的参数，只需要在过滤器函数加上我们需要的参数。下面是一个自定义过滤器，该过滤器允许用户指定对字符串的前几个字母大写。
<body ng-app="myApp" ng-controller="myController">
<div>{{ string | myUppercase }}</div>
<div>{{ string | myUppercase:3 }}</div>
<div>{{ string | myUppercase:6 }}</div>
<div>{{ string | myUppercase:15 }}</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.string = "textString";
});
app.filter("myUppercase", function () {
return function(inputString,number) {
if(number == undefined || number <= 0 || number >= inputString.length)
return inputString.toUpperCase();
return inputString.slice(0,number).toUpperCase()+inputString.slice(number);
};
});
</script>
</body>
5.注意事项
多个过滤器同时使用
AngularJS会从左到右依次执行每一个过滤器，要注意后面的过滤器是否会对前面的过滤器造成影响。
下面这个例子中，uppercase过滤器完全被lowercase过滤器的影响所覆盖了。
<body ng-app="myApp" ng-controller="myController">
<div>{{ string | uppercase | lowercase}}</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.string = "textString";
});
</script>
</body>
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
