1.1. angular中的过滤使用浅析
1.2. 本文章主要针对 angular内置对象的使用和自定义对象的使用进行解析
1.3. 过滤器( filter )
1.- 在 ng 中过滤器是用在表达式中,或代码中将某一个数据进行格式化或筛选转换而用的语法结构.
1.4. 语法1:
{{ ng 表达式 | 过滤器名 :参数1 :参数2 }}
类似:
function 过滤器名( ng 表达式,参数1,参数2 ) {
return ...
}
1.5. 语法2:
在 代码中 注入 $filter 函数,该函数需要字符串参数,用于描述需要拿到什么过滤器,$filter 函数返回一个函数,这个返回的函数即可实现格式化或筛选.
这里函数第一个参数是需要过滤的数据,第二个以后的参数是在过滤时需要的参数.
1.5.1. 在angular中内置了9个过滤器，如下所示：
- currency 货币过滤器
- date 日期过滤器
- filter 自定义过滤器
- json json过滤器（不太常用）
- limitTo 限制（或者成为条件）过滤器
- lowercase 小写字母过滤器
- number 数字过滤器
- orderBy 排序过滤器
- uppercase 大写字母过滤器
1.6. currency 货币过滤器
1.6.1. 解析：
0、currency过滤器会把一个数字，改成美元形式，例如： 123455 -----》 $123,455.00
1、<script src="./angular-locale_zh-cn.js"></script> 是为了把金币符号转换为人民币￥的符号
2、 默认的金币符号是美元的符号
3、currency会默认保留小数点后两位，没有小数点的话用"xxx.00"补齐
1.7. 示例demo：
<script>
angular.module('currencyExample',[])
.controller('ExampleController',['$scope',function($scope) {
$scope.amount = 1234.56;
}]);
</script>
<div ng-controller="ExampleController">
<input type="number" ng-model="amount" aria-label="amount"> <br>
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span>
no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
</div>
1.8. date 日期过滤器
1.8.1. 解析：
1、new Date（）创建的对象时间日期存储的形式为 Thu Mar 30 2017 22:42:32 GMT+0800 (中国标准时间)
同过date过滤器可以很轻松的改成我们想要的时间日期的样式：
例如 now | date :'yyyy年MM月dd日 hh时mm分ss秒' 可以把时间转换成 2017年03月30日 10 时44分37秒
2、date过滤器中的 汉子都可以随便改， 但是 yyyy MM 等不能修改。
3、date过滤器很灵活，比如 要转换成 10 时44分37秒 ，把过滤器改成：now | date :'hh时mm分ss秒'
要转换成 10 ：44：37 ，把过滤器改成：now | date :'hh ：mm ：ss'
要转换成 10 时44分 ，把过滤器改成：now | date :'hh时mm分'
4、<script src="./angular-locale_zh-cn.js"></script>文件是为了把时间转换成中国本地的时间形式
1.9. 示例demo
<script src="../../angular.js"></script>
<script src="./angular-locale_zh-cn.js"></script>
<body ng-app="mainApp">
{{ now }}
<br>
{{ now | date :'yyyy年MM月dd日 hh时mm分ss秒' }}
<br>
{{ now | date :'MM月dd日 yyyy年 hh时mm分ss秒 EEEE' }}
</body>
<script>
angular.module( 'mainApp',[] )
.run( function ( $rootScope ) {
$rootScope.now = new Date();
});
</script>
1.10. date过滤器的另一种书写形式
<body ng-app="mainApp">
{{ now }}
</body>
<script>
angular.module( 'mainApp',[] )
// 1,注入 $filter
.run( [ '$rootScope','$filter',function ( $rootScope,$filter ) {
var curr = new Date();
// 2,利用 $filter 拿到 date 过滤器
var dateFn = $filter( 'date' );
// 此时 dateFn 就是一个用于过滤时间对象的函数
// 该函数有两个参数,第一个参数是需要过滤的数据
// 第二个参数是 过滤使用的格式
$rootScope.now = dateFn( curr,'yyyy-MM-dd HH:mm:ss EEEE 哈哈哈哈' );
}]);
</script>
1.11. limitTo 限制过滤器
1.11.1. 解析
1、常常用于将一个数组或字符串中的某一部分取出来
2、当要过滤数组，且过滤器后面的参数是一个数字，这时候取出数组的前几个元素，
当要过滤数组，且过滤器后面的参数是有两个参数，第一个表示要过滤的长度，第二个表示开始的元素
3、当要过滤字符串时，且过滤器后面传入一个数字参数时，表示要取出字符串的前几个字符
当要过滤字符串时，且过滤器后面传入连个参数时，第一个表示要过滤的长度，第二个表示开始的字符
1.12. 示例demo：
<script>
angular.module('limitToExample',function($scope) {
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.longNumber = 2345432342;
$scope.numLimit = 3;
$scope.letterLimit = 3;
$scope.longNumberLimit = 3;
}]);
</script>
<div ng-controller="ExampleController">
<label>
Limit {{numbers}} to:
<input type="number" step="1" ng-model="numLimit">
</label>
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
<label>
Limit {{letters}} to:
<input type="number" step="1" ng-model="letterLimit">
</label>
<p>Output letters: {{ letters | limitTo:letterLimit }}</p>
<label>
Limit {{longNumber}} to:
<input type="number" step="1" ng-model="longNumberLimit">
</label>
<p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p>
</div>
1.12.1. 重点是 filter 过滤器（重点）
1.12.2. 解析：
1、 filter 过滤器的使用
语法: 表达式 | filter: 参数
在一个数组或对象或字符串中利用 filter 过滤,取出符合过滤项的数据
filter 的参数就是过滤的条件
2、参数可以是
1> 字符串( 遍历每一个数据中的 每一个数据 如果匹配到了就保留下来 )
2> 对象( 提供键值,在过滤的时候会根据键来寻找 )
3> 函数( 根据每一个数据都会调用一次函数,根据函数的返回值来确定是否需要保留数据 )
1.13. 示例demo（参数为字符串）：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../angular.js"></script>
</head>
<body ng-app="mainApp">
<input type="text" ng-model="txt"> <br>
<table border="1" width="800">
<thead>
<th>编号</th>
<th>name</th>
<th>age</th>
<th>gender</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: txt">
<td>{{ $index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</body>
<script>
var data = [
{ name: 'jim',age: 89,gender: 'man' },{ name: 'tom',age: 29,gender: 'female' },{ name: 'jack',age: 39,{ name: 'jerry',age: 49,{ name: 'rose',age: 59,{ name: 'bob',age: 69,{ name: 'deve',age: 79,{ name: 'hanmeimei',age: 19,gender: 'female' }
];
angular.module( 'mainApp',[] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.14. 示例demo2（参数为对象）：
Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../angular.js"></script>
</head>
<body ng-app="mainApp">
<input type="text" ng-model="txt"> <br>
<table border="1" width="800">
<thead>
<th>编号</th>
<th>name</th>
<th>age</th>
<th>gender</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: { name: txt }">
<td>{{ $index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</body>
<script>
var data = [
{ name: 'jim',[] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.15. 示例demo3（参数为函数时）：
Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../angular.js"></script>
</head>
<body ng-app="mainApp">
<input type="text" ng-model="txt"> <br>
<table border="1" width="800">
<thead>
<th>编号</th>
<th>name</th>
<th>age</th>
<th>gender</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: getLt30">
<td>{{ $index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</body>
<script>
var data = [
{ name: 'jim',[] )
.run( function ( $rootScope ) {
$rootScope.list = data;
$rootScope.getLt30 = function ( curr,index,arr ){
// 第一个参数是当前遍历的元素
// return curr.age <= 30;
var value = $rootScope.txt || 0;
// value 为一个字符串,为 0
if ( value != 0 ) {
value = parseInt( value ); // NaN
}
// 0,数字,NaN
if ( value != value ) {
value = 0;
}
// 0 或 数字
console.log( value );
if ( value ) {
return curr.age <= value;
}
return true;
};
});
</script>
</html>
1.16. 示例demo（综合案例）4：
Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../angular.js"></script>
<style>
.clickable {
cursor: pointer;
}
</style>
</head>
<body ng-app="mainApp">
<input type="button" value="按照年龄排序" ng-click="txt= txt=='age' ? '-age': 'age'" > <br>
<table border="1" width="800">
<thead>
<th>编号</th>
<th class="clickable" ng-click="txt= txt=='name' ? '-name': 'name'">name</th>
<th class="clickable" ng-click="txt= txt=='age' ? '-age': 'age'">age</th>
<th class="clickable" ng-click="txt= txt=='gender' ? '-gender': 'gender'">gender</th>
</thead>
<tbody>
<tr ng-repeat="item in list | orderBy:txt">
<td>{{ $index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</body>
<script>
var data = [
{ name: 'jim',[] )
.run( function ( $rootScope ) {
$rootScope.list = data;
// $rootScope.txt = 'age'; // 按照 'age' 这个属性升序排序
// $rootScope.txt = '-age';
});
</script>
</html>
1.17. 自定义过滤器
步骤：1、现在js中定义一个过滤器
2、在代码中使用
1.17.1. 示例demo解析：
<body ng-app="mainApp">
{{ 'getElementById' | myConvert }}
<br>
{{ 'getElementById' }}
<br>
{{ txt }}
</body>
<script>
angular.module( 'mainApp',[] )
.filter( 'myConvert',[ '$filter',function ( $filter ) {
return function ( data ) {
return data.replace( /(.)([A-Z])/g,function ( _,a,b ) {
return a + '-' + b.toLowerCase();
}).replace( /(.)([A-Z])/g,b ) {
return a + '-' + b.toLowerCase();
});
}
}] )
.run( [ '$rootScope',$filter ) {
$rootScope.txt = $filter( 'myConvert' )( 'querySelectotAll' );
}] )
</script>
1.17.1.1. 以上过滤器实现了驼峰转换，例如： 'getElementById' -> 'get-element-by-id'
1.18. orderBy 排序过滤器
1.18.1. 解析：
1、接受一个字符串表示要排序的条件
2、一下例子中点击每一个表头（即th标签）中的内容自动按照当前组排序
1.18.1.1. 示例demo：
<style>
table {
margin: 0 auto;
}
th {
cursor: pointer;
}
</style>
<body ng-app="mainApp">
<div class="container" ng-controller="mainController">
<table width="600" border="1px solid #ccc">
<th>序号</th>
<th ng-click="txt = txt == 'name' ? '-name': 'name'">姓名</th>
<th ng-click="txt = txt == 'age' ? '-age': 'age'">年龄</th>
<th ng-click="txt = txt == 'gender' ? '-gender': 'gender'">性别</th>
<tr ng-repeat="item in list |orderBy : txt">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</table>
</div>
<script>
var data = [
{ name: 'jim',gender: 'female' }
];
angular.module('mainApp',[])
.controller('mainController',function ($scope) {
$scope.list = data;
}])
</script>
</body>
1.1. angular中的过滤使用浅析
1.2. 本文章主要针对 angular内置对象的使用和自定义对象的使用进行解析
1.3. 过滤器( filter )
代码中将某一个数据进行格式化或筛选转换而用的语法结构.
1.4. 语法1:
1.5. 语法2:
1.5.1. 在angular中内置了9个过滤器，如下所示：
- currency 货币过滤器
- date 日期过滤器
- filter 自定义过滤器
- json json过滤器（不太常用）
- limitTo 限制（或者成为条件）过滤器
- lowercase 小写字母过滤器
- number 数字过滤器
- orderBy 排序过滤器
- uppercase 大写字母过滤器
1.6. currency 货币过滤器
1.6.1. 解析：
1.7. 示例demo：
1.8. date 日期过滤器
1.8.1. 解析：
1、new Date（）创建的对象时间日期存储的形式为 Thu Mar 30 2017 22:42:32 GMT+0800 (中国标准时间)
同过date过滤器可以很轻松的改成我们想要的时间日期的样式：
例如 now | date :'yyyy年MM月dd日 hh时mm分ss秒' 可以把时间转换成 2017年03月30日 10 时44分37秒
2、date过滤器中的 汉子都可以随便改， 但是 yyyy MM 等不能修改。
3、date过滤器很灵活，比如 要转换成 10 时44分37秒 ，把过滤器改成：now | date :'hh时mm分ss秒'
要转换成 10 ：44：37 ，把过滤器改成：now | date :'hh ：mm ：ss'
要转换成 10 时44分 ，把过滤器改成：now | date :'hh时mm分'
4、<script src="./angular-locale_zh-cn.js"></script>文件是为了把时间转换成中国本地的时间形式
1.9. 示例demo
1.10. date过滤器的另一种书写形式
1.11. limitTo 限制过滤器
1.11.1. 解析
1、常常用于将一个数组或字符串中的某一部分取出来
2、当要过滤数组，且过滤器后面的参数是一个数字，这时候取出数组的前几个元素，
当要过滤数组，且过滤器后面的参数是有两个参数，第一个表示要过滤的长度，第二个表示开始的元素
3、当要过滤字符串时，且过滤器后面传入一个数字参数时，表示要取出字符串的前几个字符
当要过滤字符串时，且过滤器后面传入连个参数时，第一个表示要过滤的长度，第二个表示开始的字符
1.12. 示例demo：
1.12.1. 重点是 filter 过滤器（重点）
1.12.2. 解析：
函数的返回值来确定是否需要保留数据 )
1.13. 示例demo（参数为字符串）：
1.14. 示例demo2（参数为对象）：
1.15. 示例demo3（参数为函数时）：
1.16. 示例demo（综合案例）4：
属性升序排序
// $rootScope.txt = '-age';
});
</script>
</html>
1.17. 自定义过滤器
步骤：1、现在js中定义一个过滤器
2、在代码中使用
1.17.1. 示例demo解析：
1.17.1.1. 以上过滤器实现了驼峰转换，例如： 'getElementById' -> 'get-element-by-id'
1.18. orderBy 排序过滤器
1.18.1. 解析：
1、接受一个字符串表示要排序的条件
2、一下例子中点击每一个表头（即th标签）中的内容自动按照当前组排序
1.18.1.1. 示例demo：
