AngularJS 1.x系列：AngularJS过滤器（4）
1. AngularJS过滤器（Filter）使用方法
AngularJS中过滤器（Filter）主要功能是格式化数据。
AngularJS过滤器使用方法有3种：
◊ 在表达式{{}}中使用
◊ 在指令中使用
◊ 在Controller或Service、Factory、Provider等服务中使用
1.1 表达式中使用过滤器
过滤器使用管道符（|）添加到表达式或指令中。
语法：
{{ expression | filter }}
可以同时使用多个过滤器，多个过滤器之间管道符（|）分隔。
{{ expression | filter1 | filter2 | ... | filterN }}
过滤器可以带参数，参数使用冒号（:）隔开。
{{ expression | filter1:param1 | filter2:param2 | ... | filterN:paramN }}
1.2 指令中使用过滤器
过滤器使用管道符（|）添加到表达式或指令中。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 600 },
{ ProductName: "数码", Quantity: 200 },
{ ProductName: "手机", Quantity: 300 }
];
}]);
</script>
</head>
<body>
<ul ng-controller="ProductCtrl">
<li ng-repeat="item in data | orderBy: 'Quantity'">
<span>{{ item.ProductName }}</span>
<span>{{ item.Quantity }}</span>
</li>
</ul>
</body>
</html>
降序：
<li ng-repeat="item in data | orderBy: 'Quantity' : true">
1.3 在Controller或AngularJS服务中使用过滤器
在Controller、Service、Factory、Provider等服务中使用过滤器方式：依赖注入。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("MainCtrl", ["$scope", "currencyFilter", function($scope, currencyFilter) {
$scope.unitprice = currencyFilter(10000);
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
{{ unitprice }}
</div>
</body>
</html>
currencyFilter为AngularJS内置过滤器，用于将数字转化为货币形式。
AngularJS提供$filter服务，可以调用所有过滤器。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("MainCtrl", ["$scope", "$filter", function($scope, $filter) {
$scope.unitprice = $filter("currency")(10000);
$scope.now = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
{{ unitprice }} // $10,000.00
{{ now }} // 2017-06-05 23:08:02
</div>
</body>
</html>
$scope.unitprice = $filter("currency")(, "￥"); // ￥10,000.00
$filter("name")根据名称获取对应的过滤器，把数据作为参数传递给过滤器处理。
2. AngularJS内置过滤器
2.1 filter
filter过滤器用来处理数组，过滤包含某个子串的元素，过滤后的元素作为子数组返回。可以是字符串数组或对象数组。
对象数组，则匹配属性的值。可以接收一个参数，用来定义子元素的匹配规则。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="text" class="form-control" ng-model="keyword" placeholder="请输入查询关键字" />
</div>
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | filter: keyword">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | filter: {'ProductName': '数'}">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
2.2 currency
currency货币格式化，默认为$，可以参数设置其他符号及精度。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="text" class="form-control" ng-model="keyword" placeholder="请输入查询关键字" />
</div>
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | filter: keyword">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
设置其他符号：
{{ 1000 | currency: "￥" }} // ￥1,000.00
设置精度：
{{ 1000.75 | currency: "￥": 1 }} // ￥1,000.8
2.3 number
number过滤器用于将数字格式化为文本，可以对数字设置精度。默认保留的小数位数小于或等于3。
{{ 10000 | number }} // 10,000
{{ 3.1415926 | number }} // 3.142
{{ 3.1415926 | number: 2 }} // 3.14
2.4 lowercase & uppercase
lowercase过滤器：将字符串中的大写字母全部转换为小写。
{{ "Hello AngularJS" | lowercase }} // hello angularjs
uppercase过滤器：将字符串中的小写字母全部转换为大写。
{{ "Hello AngularJS" | uppercase }} // HELLO ANGULARJS
2.5 date
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("DateCtrl", ["$scope", function($scope){
$scope.now = new Date();
}]);
</script>
</head>
<body>
<div ng-controller="DateCtrl">
<span>{{ now | date }}</span>
<span>{{ now | date: "yyyy-MM-dd" }}</span>
<span>{{ now | date: "yyyy-MM-dd HH:mm:ss" }}</span>
<span>{{ now | date: "yyyy年MM月dd日" }}</span>
</div>
</body>
</html>
2.5 limitTo
limitTo过滤器：用来截取数组或字符串，参数用来指定截图长度。如果参数是负值，则从尾部开始截取。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | limitTo: 2">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
{{ "Hello" | limitTo: 2 }} // He
2.6 orderBy
orderBy过滤器：用来将一个数组中的元素进行排序，可以设置参数指定排序规则。
参数：字符串，表示按照该属性名进行排序。
参数：数组，表示依次按照数组中的属性进行排序。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | orderBy: 'Quantity' | limitTo: 2">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
orderBy过滤器默认为升序。
设置降序两种方式：
<tr ng-repeat="item in data | orderBy: 'Quantity': true | limitTo: 2">
<tr ng-repeat="item in data | orderBy: '-Quantity' | limitTo: 2"> // 排序属性前加减号（-）
3. 自定义过滤器
AngularJS自定义过滤器，调用模块实例的filter()方法。
3.1 自定义不带参数过滤器
filter()使用方法：
var app = angular.module("app", []);
app.filter("filterName", function() {
return function(input) {
// 逻辑处理
...
return result;
};
});
filter()方法两个参数：
第一个参数：过滤器名称，
第二个参数:过滤器定义方法，必须返回一个用于处理过滤器逻辑的方法。返回的方法可接受一个参数：过滤器的输出数据。
示例:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("MainCtrl", ["$scope", function ($scope) {
$scope.amount = 1234.53;
}]);
app.filter("toRMB", function () {
return function (input) {
var fraction = ["角", "分"];
var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
var unit = [["元", "万", "亿"], ["", "拾", "佰", "仟"]]; var result = "整";
for (var i = 0; i < fraction.length; i++) {
var t = Math.floor(input * 10 * Math.pow(10, 1)) % 10;
result += (digit[Math.floor(input * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, "");
} result = result || "整"; input = Math.floor(input);
for (var i = 0; i < unit[0].length && input > 0; i++) {
var n = "";
for (var j = 0; j < unit[1].length && input > 0; j++) {
n = digit[input % 10] + unit[1][j] + n;
input = Math.floor(input / 10);
} result = n.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + result;
} result = result.replace(/(零.)*零元/, "元").replace(/(零.)+/g, "零").replace(/^整$/, "零元整"); return result;
};
});
</script>
</head>
<body>
<div ng-controller="MainCtrl">
{{ amount | toRMB }}
</div>
</body>
</html>
注：toRMB数字转大写方法存在Bug，不能完全正确转换。
使用$filter调用自定义过滤器：
app.controller("MainCtrl", ["$scope", "$filter", function ($scope, $filter) {
$scope.amount = $filter("toRMB") (1234.53);
}]);
3.2 自定义带参数的过滤器
语法：
app.filter("filterName", function() {
return function(input, param1, param2, ... ,paramN) {
// 逻辑处理
...
return result;
};
});
其中：param1，param2，...，paramN为过滤器使用时传入的参数。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ProductCtrl", ["$scope", function($scope){
$scope.data = [
{ ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
app.filter("greaterThan", function() {
return function(input, unitPrice) {
var result = [];
if(typeof(unitPrice) != "undefined" && unitPrice != "") {
angular.forEach(input, function(item) {
if(item.UnitPrice > unitPrice) {
result.push(item);
}
}); return result;
} return input;
};
});
</script>
</head>
<body>
<div class="container">
<div class="row form-inline" style="padding: 5px 15px;">
单价：<input type="text" class="form-control" ng-model="unitprice" style="width: 200px;" />
</div>
<table class="table table-bordered table-hover" ng-controller="ProductCtrl" style="width: 500px;">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | greaterThan: unitprice">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
4. 第三方过滤器插件
4.1 angular-filter
官网：https://github.com/a8m/angular-filter
npm安装：
npm install angular-filter
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript" src="../lib/angular-filter.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", ["angular.filter"]);
app.controller("ProductCtrl", ["$scope", function ($scope) {
$scope.data = [
{ ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | first: 1">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
其中，引入插件：
<script type="text/javascript" src="../lib/angular-filter.min.js"></script>
在自定义模块中添加angular.filter注入：
var app = angular.module("app", ["angular.filter"]);
angular-filter部分过滤器示例：
集合元素
unique：从数组或对象中删除重复项。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript" src="../lib/angular-filter.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", ["angular.filter"]);
app.controller("ProductCtrl", ["$scope", function ($scope) {
$scope.data = [
{ ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
{ ProductName: "数码", Quantity: 2000, UnitPrice: 300 },
{ ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
];
}]);
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" ng-controller="ProductCtrl">
<thead>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | unique: 'UnitPrice'">
<td>{{ item.ProductName }}</td>
<td class="text-center">{{ item.Quantity }}</td>
<td class="text-center">{{ item.UnitPrice | currency }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
AngularJS 1.x系列：AngularJS过滤器（4）的更多相关文章
- [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- AngularJS 1.x系列：AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列------AngularJS快速开始（转载）
Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...
- AngularJS 1.x系列：AngularJS简介及第一个应用（2）
1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...
- AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJS学习之旅—AngularJS 表达式(二)
1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
随机推荐
- 【Java】List遍历时删除元素的正确方式
当要删除ArrayList里面的某个元素,一不注意就容易出bug.今天就给大家说一下在ArrayList循环遍历并删除元素的问题.首先请看下面的例子: import java.util.ArrayLi ...
- HTML中特殊符号
- wepy框架自定义组件编译报错not Found File XXX.wxss
今天在自己写wepy框架组件的时候编译后报错not Found File XXX.wxss 我去,当时我很难受啊,调用组件时结构和逻辑都正常,一写样式就原地爆炸 解决之路:1.先打开编译后的dist文 ...
- 让自定义view宽高成比例显示
有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...
- input输入限制，只允许输入数字和“.”，长度不得超过20
<input style="margin-top: 10px;width: 100%;text-align:center;" id="removeArea" ...
- Oracle 查询权限视图
在Oracle中有很多用于查权限的视图,但很多人在需要查权限时会很困惑,不知道该用哪个视图去查,这里我列出几个常见的用于查权限的视图及其用法: 1DBA_ROLE_PRIVS 该视图主要有以下2个作用 ...
- IOS开发protocol使用
1.什么是protocol? protocol(协议)是用来定义对象的属性和行为,用于回调. 2.protocol分类? 协议中有三个修饰关键字@required和@optional和@propert ...
- Windows 下安装drozer（Windows 10），连接手机（红米note4X）
Windows 下安装drozer(Windows 10),连接手机(红米note4X) 首先下载drozer(http://mwr.to/drozer). 红米手机开发者模式 遇到第一个问题,红米手 ...
- centos后台运行Python
在服务器上,为了退出终端,程序依然能够运行,需要设置程序在后台运行. 关键的命令:nohup *基本用法:进入要运行的py文件目录前 nohup python -u test.py > tes ...
- HTML---引入css,js | 常用标签示例
一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...