JavaScript

超轻量级php框架startmvc

首页 JavaScript AngularJS 霸道的过滤器小结

AngularJS 霸道的过滤器小结

更新时间：2020-05-08 18:06:01 作者：startmvc
一、为什么使用过滤器？在实际操作中，我们需要对统一数据源进行多次转换，比如我的货

一、为什么使用过滤器？

在实际操作中，我们需要对统一数据源进行多次转换，比如我的货币单位，在不同的国家我们将用不同的符号表示。因此，你可能会想到在控制器中判断国家以显示不同的结果，但是过滤器却可以更好的帮助我们做到同样的效果。

过滤器将数据在被指令处理并显示到视图之前进行转换，而不必修改作用域中原有的数据，这样能够允许同一份数据在应用中的不同部分以不同形式得以展示。

接下来，我们详细讨论有关过滤器的用法

二、过滤单个数据的值

下表展示用于单个数据的内置过滤器

这里写图片描述 

先来看看我们的准备案例，待会我们将在这个案例的基础上来使用内容过滤器


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>
 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>
 <tr ng-repeat="p in products">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price}}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
})
</script>
</body>
</html>

就是一个表格的形式来展示产品的详细情况的案例

这里写图片描述

1.格式化货币值


<tr ng-repeat="p in products">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <!-- 使用currency -->
 <td>{{p.price | currency}}</td>
</tr>

这里写图片描述

2.格式化数字值


<tr ng-repeat="p in products">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <!-- 保留小数点后3位 -->
 <td>{{p.price | number : 3}}</td>
</tr>

这里写图片描述

3.格式化日期


// 在控制器中添加
$scope.getExpiryDate = function (days) {
 var now = new Date();
 return now.setDate(now.getDate() + days);
}

<tr ng-repeat="p in products">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <!-- 在视图中使用-->
 <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
 <!-- 货币单位本地化 -->
 <td>{{p.price}}</td>
</tr>

这里写图片描述

4.改变字符串大小写


<tr ng-repeat="p in products">
 <!-- 字母大小写 -->
 <td>{{p.name | uppercase}}</td>
 <td>{{p.category | lowercase}}</td>
 <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
 <!-- 货币单位本地化 -->
 <td>{{p.price}}</td>
</tr>

这里写图片描述

5.生成JSON


<tr ng-repeat="p in products">
 <!-- 生成JSON数据 -->
 <td>{{p.name | json}}</td>
 <td>{{p.category}}</td>
 <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
 <!-- 货币单位本地化 -->
 <td>{{p.price}}</td>
</tr>

这里写图片描述

6.本地化过滤器输出

需要移入本地化JS文件


<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>

<tr ng-repeat="p in products">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <!-- 货币单位本地化 -->
 <td>{{p.price | currency}}</td>
</tr>

这里写图片描述

三、过滤集合

1.限制项目的数量—limitTo过滤器


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>
 <div class="panel panel-body">
 Limit: <select ng-model="limitVal" ng-options="item for item in limitRange"></select>
 </div>
 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>
 <!-- 只显示limitVal行 -->
 <tr ng-repeat="p in products | limitTo : limitVal">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
 // 显示的条数
 $scope.limitVal = '5';
 // 在限制条数的范围条项
 $scope.limitRange = [];
 for (var i = (0 - $scope.products.length); i <= $scope.products.length; i++) {
 $scope.limitRange.push(i.toString());
 }
})
</script>
</body>
</html>

单击下拉列表，根据提示显示不同的条数，负数表示从后往前取

这里写图片描述

2.选取项—filter过滤器


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>

 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>
 <!-- 自定义过滤 -->
 <tr ng-repeat="p in products | filter : selectItems">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
 // 自定义过滤器
 $scope.selectItems = function (item) {
 // 仅仅保留类别为Fish或者name=='Beer'的行
 return item.category == 'Fish' || item.name == 'Beer';
 }

})
</script>
</body>
</html>

仅仅保留类别为Fish或者name=='Beer'的行

这里写图片描述

3.对项目进行排序—orderBy过滤器


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>

 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>
 <!-- 通过价格按照升序排列 -->
 <!-- <tr ng-repeat="p in products | orderBy : 'price'"> -->
 <!-- price前加-表示按照降序排列 -->
 <!-- <tr ng-repeat="p in products | orderBy : '-price'"> -->
 <!-- 自定义排序 -->
 <!-- <tr ng-repeat="p in products | orderBy : customOrder"> -->
 <!-- 组合排序，保质期<5的降序排列，其他的按照价格升序排序 -->
 <tr ng-repeat="p in products | orderBy : [customOrder, '-price']">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>

 </tr>
 </tbody>
 </table>
 </div>
 </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
 // 自定义函数排序
 $scope.customOrder = function (item) {
 // 保质期<5的不排序，其他的按照价格升序排序
 return item.expiry < 5 ? 0 : item.price;
 }
})
</script>
</body>
</html>

保质期<5的不排序，其他的按照价格升序排序

这里写图片描述 

四、链式过滤器

就是将过滤器串联起来综合使用


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>

 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>
 <!-- 过滤链条，通过orderBy和limitTo共同作用 -->
 <tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">
 <td>{{p.name}}</td>
 <td>{{p.category}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>

 </tr>
 </tbody>
 </table>
 </div>
 </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
 // 自定义函数排序
 $scope.customOrder = function (item) {
 // 保质期<5的不排序，其他的按照价格升序排序
 return item.expiry < 5 ? 0 : item.price;
 }

})
</script>
</body>
</html>

先按照自定义customOrder函数以price倒序排列，然后只取得5条数据


<tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">

这里写图片描述

五、自定义过滤器

1.创建格式化数据值的过滤器


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <dlv class="panel panel-default" ng-controller="defaultCtrl">
 <div class="panel panel-header">
 Products
 <span class="label label-primary">{{products.length}}</span>
 </div>

 <div class="panel panel-body">
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
 </thead>
 <tbody>

 <tr ng-repeat="p in products">
 <!-- 使用自定义过滤器 -->
 <td>{{p.name | labelCase}}</td>
 <td>{{p.category | labelCase : true}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
 $scope.products = [
 { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
 { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
 { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

 { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
 { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
 { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

 { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
 { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
 { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
 ];
});
</script>
<!-- 引入自定义的过滤器 -->
<script type="text/javascript" src="js/createFilters.js"></script>
</body>
</html>

自定义过滤器，labelCase反转字符串


// js/createFilters.js文件
angular.module("exampleApp")
 .filter("labelCase", function () {
 return function (value, reverse) {
 if (angular.isString(value)) {
 var inter = reverse ? value.toUpperCase() : value.toLowerCase();
 return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
 } else {
 return value;
 }
 }
 })

这里写图片描述 

2.创建集合过滤器

在createFilter中定义一个skip过滤函数


angular.module("exampleApp")
 .filter("labelCase", function () {
 return function (value, reverse) {
 if (angular.isString(value)) {
 var inter = reverse ? value.toUpperCase() : value.toLowerCase();
 return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
 } else {
 return value;
 }
 }
 })
 .filter("skip", function () {
 return function (value, count) {
 if (angular.isArray(value) && angular.isNumber(count)){
 if (count > value.length || count < 0) {
 return value;
 } else {
 // 跳过数组前两项
 return value.slice(count);
 }
 } else {
 return value;
 }
 }
 })

在视图中使用


<tr ng-repeat="p in products | skip : 2">
 <!-- 使用自定义过滤器 -->
 <td>{{p.name | labelCase}}</td>
 <td>{{p.category | labelCase : true}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>
</tr>

移除前两项Apples和Bananas，然后显示

这里写图片描述

3.在已有的过滤器上搭建新的过滤器

在createFilter中添加take过滤器返回，将skip和limitTo两个过滤器方法综合起来


angular.module("exampleApp")
 .filter("labelCase", function () {
 return function (value, reverse) {
 if (angular.isString(value)) {
 var inter = reverse ? value.toUpperCase() : value.toLowerCase();
 return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
 } else {
 return value;
 }
 }
 })
 .filter("skip", function () {
 return function (value, count) {
 if (angular.isArray(value) && angular.isNumber(count)){
 if (count > value.length || count < 0) {
 return value;
 } else {
 // 跳过数组前两项
 return value.slice(count);
 }
 } else {
 return value;
 }
 }
 })
 // 在已有过滤器的基础上建立新的过滤器
 // 将上述的skip和limit两个过滤器合并
 .filter("take", function ($filter) {
 return function (data, skipCount, limitCount) {
 // 先跳过数组的前skipCount项
 var skipData = $filter("skip")(data, skipCount);
 // 接着只取limitCount行
 return $filter("limitTo")(skipData, limitCount);
 }
 })

在视图中使用：


<tr ng-repeat="p in products | take : 2 : 5">
<!-- 使用自定义过滤器 -->
 <td>{{p.name | labelCase}}</td>
 <td>{{p.category | labelCase : true}}</td>
 <td>{{p.expiry}}</td>
 <td>{{p.price | number : 2}}</td>
</tr>

先移除两项，然后值取5条数据

这里写图片描述

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

angularjs 过滤器 angularjs filter用法 angularjs中的过滤器
文章分类
相关文章

解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

angularjs自定义过滤器demo示例

AngularJs中$cookies简单用法分析

AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

bootstrap tooltips在 angularJS中的使用方法

angularjs实现table表格td单元格单击变输入框/可编辑状态示例

AngularJS实现的自定义过滤器简单示例

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

angularjs通过过滤器返回超链接的方法

AngularJS 多指令Scope问题的解决

深入理解Angularjs 脏值检测

angularJS实现不同视图同步刷新详解

angularJs利用$scope处理升降序的方法

angularJs中json数据转换与本地存储的实例

在angularJs中进行数据遍历的2种方法

angularJs提交文本框数据到后台的方法

对angularJs中自定义指令replace的属性详解

angularJS自定义directive之带参方法传递详解

AngularJS $http post 传递参数数据的方法

angularJS1 url中携带参数的获取方法