過(guò)濾器與自定義過(guò)濾器的介紹

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:12:17

過(guò)濾器與自定義過(guò)濾器的介紹

過(guò)濾器與自定義過(guò)濾器的介紹:angularjs中的過(guò)濾器為了實(shí)現(xiàn)對(duì)于表達(dá)式結(jié)果的篩選、過(guò)濾、格式化，達(dá)到更好的表現(xiàn)效果。過(guò)濾器的語(yǔ)法：支持多重過(guò)濾和傳參 {{expression | 過(guò)濾器名稱(chēng) : 參數(shù) | 過(guò)濾器名稱(chēng)2：參數(shù) }} 方式：| -》管道常用的過(guò)濾器： currency 貨幣樣式

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀過(guò)濾器與自定義過(guò)濾器的介紹:angularjs中的過(guò)濾器為了實(shí)現(xiàn)對(duì)于表達(dá)式結(jié)果的篩選、過(guò)濾、格式化，達(dá)到更好的表現(xiàn)效果。過(guò)濾器的語(yǔ)法：支持多重過(guò)濾和傳參 {{expression | 過(guò)濾器名稱(chēng) : 參數(shù) | 過(guò)濾器名稱(chēng)2：參數(shù) }} 方式：| -》管道常用的過(guò)濾器： currency 貨幣樣式

angularjs中的過(guò)濾器為了實(shí)現(xiàn)對(duì)于表達(dá)式結(jié)果的篩選、過(guò)濾、格式化，達(dá)到更好的表現(xiàn)效果。
過(guò)濾器的語(yǔ)法：支持多重過(guò)濾和傳參
{{expression | 過(guò)濾器名稱(chēng) : ‘參數(shù)’ | 過(guò)濾器名稱(chēng)2：‘參數(shù)’ }}
方式：| -》管道

常用的過(guò)濾器：
currency 貨幣樣式的過(guò)濾器
date 日期
uppercase/lowercase 大小寫(xiě)的處理
orderBy 對(duì)指定的數(shù)組進(jìn)行升序或者降序排列
number 格式化數(shù)字為文本（對(duì)有小數(shù)點(diǎn)的數(shù)據(jù)的處理）
limitTo 限定數(shù)組或者字符串要顯示的個(gè)數(shù)

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
 <table>
 <thead>
 <tr>
 <th>名字</th>
 <th>分?jǐn)?shù)</th>
 <th>年齡</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="stu in stuList | orderBy:'score':true | limitTo:3">
 <td>{{stu.name}}</td>
 <td>{{stu.score}}</td>
 <td>{{stu.age}}</td>
 </tr>
 </tbody>
 </table></p><script>
 var app = angular.module('myApp', ['ng']);

 app.controller('myCtrl', function ($scope) {
 $scope.stuList = [
 {name:'Mary0',age:20,score:80},
 {name:'Mary1',age:21,score:70},
 {name:'Mary2',age:22,score:88},
 {name:'Mary3',age:23,score:90},
 {name:'Mary4',age:24,score:60}
 ]
 });</script></body></html>

這里寫(xiě)圖片描述

自定義過(guò)濾器方式：

app.filter(‘過(guò)濾器名稱(chēng)’,function(){
return function(input，arg){
//input是傳遞給過(guò)濾器的數(shù)據(jù)
//arg 是過(guò)濾器本身的參數(shù)
return ‘過(guò)濾后的結(jié)果’
}
})

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
 <!-- 將price所對(duì)應(yīng)的值通過(guò)管道傳遞給自定義的過(guò)濾器-->
 <h1>{{price | myFilter:'￥' }}</h1></p><script>
 var app = angular.module('myApp', ['ng']); //創(chuàng)建過(guò)濾器:過(guò)濾器的本質(zhì)是方法，有輸入有

輸出 app.filter('myFilter', function () { return function (input,arg) { console.log( '輸入為'+input+" 過(guò)濾器的參數(shù)為:"+arg); var output = arg+input; return output; } }) app.controller('myCtrl', function ($scope) { $scope.price = 100; });</script></body></html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

過(guò)濾器與自定義過(guò)濾器的介紹

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：介紹過(guò)濾器器的

熱門(mén)焦點(diǎn)

過(guò)濾器與自定義過(guò)濾器的介紹

過(guò)濾器與自定義過(guò)濾器的介紹

自定義過(guò)濾器方式：

過(guò)濾器與自定義過(guò)濾器的介紹

最新推薦

猜你喜歡

熱門(mén)推薦