|
demo
這是整個示例demo
1、filter.js文件
1 2 3 4 5 6 7 | angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope, $http, productsUrl) {
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接轉(zhuǎn)成了數(shù)組
});
});
|
這里我把引入的服務(wù)作為一個常量，這樣寫的好處是我便于修改。
對于如何使用$http 服務(wù)，請參考我的AngularJs（三) Deployed 使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title></title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
</head>
<body ng-controller="defaultCtrl" >
<div class="panel">
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Name</td><td>Category</td><td>Price</td><td>expiry</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in products">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
運行的結(jié)果：
Use filter
過濾器分為兩類：
1、對單個數(shù)據(jù)的過濾
2、對集合進行操作。
一、 對數(shù)據(jù)進行操作使用比較簡單，如demo上所示，在{{item | currency}} 等，就可以進行格式化。
currency：“f" 就可以是價格過濾成英鎊。
單個數(shù)據(jù)的過濾器 想過濾的數(shù)據(jù)格式，在過濾器后使用 ：在相應(yīng)的格式字符。
number： 表示數(shù)據(jù)小數(shù)位保留位，
二： 集合過濾，從集合中過濾出一定的數(shù)量。
在基本demo中我加入這樣：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div>
filter.js中加入了：
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接轉(zhuǎn)成了數(shù)組
$scope.limitValue = "";//要是字符串
<span style="background-color: rgb(, , );"> $scope.limitRange = [];
for (var i = ; i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
<span style="background-color: rgb(, , );"> }</span></span>
});
<tr ng-repeat="item in products|limitTo:limitValue">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr>
<span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );"> </span>
|
在寫函數(shù)必須寫在 success中，因為采用異步獲取json數(shù)據(jù)。
結(jié)果：
limit :就可以調(diào)節(jié)在頁面顯示的個數(shù)。
Create filter
AngularJs有兩種過濾器，首先我們可以創(chuàng)建對單個數(shù)據(jù)進行格式的過濾器，比如：輸出的字符串首字母大寫。
先說如何定義個過濾器： 過濾器是通過module.filter 創(chuàng)建的，創(chuàng)建的一般格式為：
angular.module("exampleApp")//表示獲取一個模塊。filter是在模塊下創(chuàng)建的。
.filter("labelCase", function () { //接收兩個參數(shù)，第一個參數(shù)表示過濾器的名字，第二個是一個工廠函數(shù)
return function (value, reverse) { //返回一個工人函數(shù)，對坐相應(yīng)的過濾處理。第一個參數(shù)表示需要進行格式的對象，第二個參數(shù)表示配置，按照什么格式。
1 2 3 4 5 6 7 8 9 10 | if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});
|
這個 是我另寫到一個js文件中 的。customFilter.js 不要忘記添加。
1 2 3 | <link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
<script src="customFilter.js"></script>
|
好了現(xiàn)在我來更改下數(shù)據(jù)：
1 | <td>{{item.name | labelCase:true}}</td>
|
前面講過如果需要添加配置信息，書寫格式是 過濾器 ：option
當然默認的參數(shù)也可以不寫，就會默認給Null值或者undefined。
結(jié)果：
自定義一個對各數(shù)據(jù)處理的過濾器函數(shù)就是這么簡單。
2、自定義個集合處理的函數(shù)，就像limitTo一樣。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function(data,count)
{
if (angular.isArray(data) && angular.isNumber(count)) {
if(data.length<count || count<)
{
return data;
}else
{
return data.slice(count);
}
} else {
return data;
}
}
});
|
html改的部分：
1 | <tr ng-repeat="item in products | skip: ">
|
結(jié)果：總共是六條數(shù)據(jù)，有使用了skip過濾器給過掉2條。
在自定義過濾器時，發(fā)現(xiàn)有個過濾器已經(jīng)定義了，我不想重復定義，怎么辦，我們還可以利用一創(chuàng)建的過濾器進行創(chuàng)建。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (data.length < count || count < ) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
})
.filter("take", function ($filter) {//大家可以看到，我在工廠函數(shù)引用了AngularJs的內(nèi)置服務(wù)。
return function (data, skipcount, takecount) {//大家看下我這里傳了三個參數(shù)？
var skipdata = $filter('skip')(data, skipcount);//這種寫法大家是否迷糊了呢？函數(shù)式編程。
return $filter("limitTo")(skipdata, takecount);//limitTo是內(nèi)置的過濾器。
}
});
|
$filter('skip') 調(diào)用的是skip過濾器，因為他返回的是一個函數(shù)，所以我們能繼續(xù)傳參。
1 | <tr ng-repeat="item in products | take::">
|
結(jié)果：
過濾器就是這樣就已經(jīng)完成了。是不是很簡單。
如對本文有疑問，請?zhí)峤坏浇涣魃鐓^(qū)，廣大熱心網(wǎng)友會為你解答！！ 點擊進入社區(qū)
|
