demo
這是整個樣本demo
1、filter.js檔案
angular.module("exampleApp", []).constant("productsUrl", "http://localhost:/products").controller("defaultCtrl", function ($scope, $http, productsUrl) {$http.get(productsUrl).success(function (data) {$scope.products = data;//直接轉成了數組});});
這裡我把引入的服務作為一個常量，這樣寫的好處是我便於修改。
對於如何使用$http 服務，請參考我的AngularJs（三) Deployed 使用
<!DOCTYPE html><html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"><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>
啟動並執行結果：
Use filter
過濾器分為兩類：
1、對單個資料的過濾
2、對集合進行操作。
一、 對資料進行操作使用比較簡單，如demo上所示，在{{item | currency}} 等，就可以進行格式化。
currency：“f" 就可以是價格過濾成英鎊。
單個資料的過濾器 想過濾的資料格式，在過濾器後使用 ：在相應的格式字元。
number： 表示資料小數位保留位，
二： 集合過濾，從集合中過濾出一定的數量。
在基本demo中我加入這樣：
<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;//直接轉成了數組$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>
在寫函數必須寫在 success中，因為採用非同步擷取json資料。
結果：
limit :就可以調節在頁面顯示的個數。
Create filter
AngularJs有兩種過濾器，首先我們可以建立對單個資料進行格式的過濾器，比如：輸出的字串首字母大寫。
先說如何定義個過濾器： 過濾器是通過module.filter 建立的，建立的一般格式為：
angular.module("exampleApp")//表示擷取一個模組。filter是在模組下建立的。
.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;}}});
這個 是我另寫到一個js檔案中 的。customFilter.js 不要忘記添加。
<link href="bootstrap.css" rel="stylesheet" /><script src="filter.js"></script><script src="customFilter.js"></script>
好了現在我來更改下資料：
<td>{{item.name | labelCase:true}}</td>
前面講過如果需要添加配置資訊，書寫格式是 過濾器 ：option
當然預設的參數也可以不寫，就會預設給Null值或者undefined。
結果：
自訂一個對各資料處理的過濾器函數就是這麼簡單。
2、自訂個集合處理的函數，就像limitTo一樣。
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改的部分：
<tr ng-repeat="item in products | skip: ">
結果：總共是六條資料，有使用了skip過濾器給過掉2條。
在自訂過濾器時，發現有個過濾器已經定義了，我不想重複定義，怎麼辦，我們還可以利用一建立的過濾器進行建立。
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) {//大家可以看到，我在工廠函數引用了AngularJs的內建服務。return function (data, skipcount, takecount) {//大家看下我這裡傳了三個參數？var skipdata = $filter('skip')(data, skipcount);//這種寫法大家是否迷糊了呢？函數式編程。return $filter("limitTo")(skipdata, takecount);//limitTo是內建的過濾器。}});
$filter('skip') 調用的是skip過濾器，因為他返回的是一個函數，所以我們能繼續傳參。
<tr ng-repeat="item in products | take::">
結果：
過濾器就是這樣就已經完成了。是不是很簡單。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
