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', [])
.controller('ExampleController', ['$scope', 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, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.14. 示例demo2（參數爲對象）：
<!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: { 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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.15. 示例demo3（參數爲函數時）：
<!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: 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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.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：
<!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>
<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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.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, function ( _, a, b ) {
return a + '-' + b.toLowerCase();
});
}
}] )
.run( [ '$rootScope', '$filter', function ( $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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module('mainApp', [])
.controller('mainController', ['$scope', function ($scope) {
$scope.list = data;
}])
</script>
</body>
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', [])
.controller('ExampleController', ['$scope', 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, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.14. 示例demo2（參數爲對象）：
<!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: { 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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.run( function ( $rootScope ) {
$rootScope.list = data;
});
</script>
</html>
1.15. 示例demo3（參數爲函數時）：
<!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: 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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.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：
<!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>
<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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module( 'mainApp', [] )
.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, function ( _, a, b ) {
return a + '-' + b.toLowerCase();
});
}
}] )
.run( [ '$rootScope', '$filter', function ( $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', age: 89, gender: 'man' },
{ name: 'tom', age: 29, gender: 'female' },
{ name: 'jack', age: 39, gender: 'man' },
{ name: 'jerry', age: 49, gender: 'female' },
{ name: 'rose', age: 59, gender: 'man' },
{ name: 'bob', age: 69, gender: 'female' },
{ name: 'deve', age: 79, gender: 'man' },
{ name: 'hanmeimei', age: 19, gender: 'female' }
];
angular.module('mainApp', [])
.controller('mainController', ['$scope', function ($scope) {
$scope.list = data;
}])
</script>
</body>
