AngularJs學(xué)習(xí)第八篇 過(guò)濾器filter創(chuàng)建
demo
這是整個(gè)示例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;//直接轉(zhuǎn)成了數(shù)組
});
});
這里我把引入的服務(wù)作為一個(gè)常量，這樣寫(xiě)的好處是我便于修改。
對(duì)于如何使用$http 服務(wù)，請(qǐng)參考我的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>
運(yùn)行的結(jié)果：
Use filter
過(guò)濾器分為兩類(lèi)：
1、對(duì)單個(gè)數(shù)據(jù)的過(guò)濾
2、對(duì)集合進(jìn)行操作。
一、 對(duì)數(shù)據(jù)進(jìn)行操作使用比較簡(jiǎn)單，如demo上所示，在{{item | currency}} 等，就可以進(jìn)行格式化。
currency：“f" 就可以是價(jià)格過(guò)濾成英鎊。
單個(gè)數(shù)據(jù)的過(guò)濾器 想過(guò)濾的數(shù)據(jù)格式，在過(guò)濾器后使用 ：在相應(yīng)的格式字符。
number： 表示數(shù)據(jù)小數(shù)位保留位，
二： 集合過(guò)濾，從集合中過(guò)濾出一定的數(shù)量。
在基本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;//直接轉(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>
在寫(xiě)函數(shù)必須寫(xiě)在 success中，因?yàn)椴捎卯惒将@取json數(shù)據(jù)。
結(jié)果：
limit :就可以調(diào)節(jié)在頁(yè)面顯示的個(gè)數(shù)。
Create filter
AngularJs有兩種過(guò)濾器，首先我們可以創(chuàng)建對(duì)單個(gè)數(shù)據(jù)進(jìn)行格式的過(guò)濾器，比如：輸出的字符串首字母大寫(xiě)。
先說(shuō)如何定義個(gè)過(guò)濾器： 過(guò)濾器是通過(guò)module.filter 創(chuàng)建的，創(chuàng)建的一般格式為：
angular.module("exampleApp")//表示獲取一個(gè)模塊。filter是在模塊下創(chuàng)建的。
.filter("labelCase", function () { //接收兩個(gè)參數(shù)，第一個(gè)參數(shù)表示過(guò)濾器的名字，第二個(gè)是一個(gè)工廠函數(shù)
return function (value, reverse) { //返回一個(gè)工人函數(shù)，對(duì)坐相應(yīng)的過(guò)濾處理。第一個(gè)參數(shù)表示需要進(jìn)行格式的對(duì)象，第二個(gè)參數(shù)表示配置，按照什么格式。
if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});
這個(gè) 是我另寫(xiě)到一個(gè)js文件中 的。customFilter.js 不要忘記添加。
<link href="bootstrap.css" rel="stylesheet" /> <script src="filter.js"></script> <script src="customFilter.js"></script>
好了現(xiàn)在我來(lái)更改下數(shù)據(jù)：
<td>{{item.name | labelCase:true}}</td>
前面講過(guò)如果需要添加配置信息，書(shū)寫(xiě)格式是 過(guò)濾器 ：option
當(dāng)然默認(rèn)的參數(shù)也可以不寫(xiě)，就會(huì)默認(rèn)給Null值或者undefined。
結(jié)果：
自定義一個(gè)對(duì)各數(shù)據(jù)處理的過(guò)濾器函數(shù)就是這么簡(jiǎn)單。
2、自定義個(gè)集合處理的函數(shù)，就像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: ">
結(jié)果：總共是六條數(shù)據(jù)，有使用了skip過(guò)濾器給過(guò)掉2條。
在自定義過(guò)濾器時(shí)，發(fā)現(xiàn)有個(gè)過(guò)濾器已經(jīng)定義了，我不想重復(fù)定義，怎么辦，我們還可以利用一創(chuàng)建的過(guò)濾器進(jìn)行創(chuàng)建。
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) {//大家看下我這里傳了三個(gè)參數(shù)？
var skipdata = $filter('skip')(data, skipcount);//這種寫(xiě)法大家是否迷糊了呢？函數(shù)式編程。
return $filter("limitTo")(skipdata, takecount);//limitTo是內(nèi)置的過(guò)濾器。
}
});
$filter('skip') 調(diào)用的是skip過(guò)濾器，因?yàn)樗祷氐氖且粋€(gè)函數(shù)，所以我們能繼續(xù)傳參。
<tr ng-repeat="item in products | take::">
結(jié)果：
過(guò)濾器就是這樣就已經(jīng)完成了。是不是很簡(jiǎn)單。
相關(guān)文章
Angular.js中上傳指令ng-upload的基本使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js中上傳指令ng-upload的基本使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
在AngularJs中設(shè)置請(qǐng)求頭信息(headers)的方法及不同方法的比較
在AngularJs中有三種方式可以設(shè)置請(qǐng)求頭信息，文中對(duì)每種方法給大家介紹的非常詳細(xì)，選擇那種方式可以根據(jù)自己的需求，感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-09
Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了$http使用post請(qǐng)求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2016-08-08
Angular Universal 主要關(guān)注將 Angular App 如何進(jìn)行服務(wù)端渲染和生成靜態(tài) HTML，對(duì)于用戶(hù)交互復(fù)雜的 SPA 并不推薦使用 SSR，本文是在 Angular 14 環(huán)境中完成，有些內(nèi)容對(duì)于新的 Angular 版本可能并不適用，感興趣的朋友一起通過(guò)本文學(xué)習(xí)2022-11-11
詳解angularjs4部署文件過(guò)大解決過(guò)程
這篇文章主要介紹了詳解angularjs4部署文件過(guò)大解決過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
AngularJS中實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
本文主要介紹AngularJS 動(dòng)畫(huà),這里對(duì)動(dòng)畫(huà)的資料詳細(xì)介紹并附有效果圖和代碼實(shí)例,有需要的小伙伴參考下2016-07-07
Angular實(shí)現(xiàn)較為復(fù)雜的表格過(guò)濾，刪除功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)較為復(fù)雜的表格過(guò)濾，刪除功能,結(jié)合實(shí)例形式分析了AngularJS針對(duì)表格的排序、查詢(xún)匹配、頁(yè)面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了淺談Angular單元測(cè)試總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10