AngularJS中的過(guò)濾器使用詳解
過(guò)濾器是用來(lái)更改修改數(shù)據(jù),并且可以在表達(dá)式或使用管道符指令將其歸入。以下是常用的過(guò)濾器的列表。
小寫(xiě)過(guò)濾器
添加小寫(xiě)的過(guò)濾器,使用管道符的表達(dá)式。在這里添加小寫(xiě)過(guò)濾器,以小寫(xiě)字母打印學(xué)生姓名。
Enter first name:<input type="text" ng-model="student.firstName"> Enter last name: <input type="text" ng-model="student.lastName"> Name in Upper Case: {{student.fullName() | lowercase}}
貨幣濾波器
加幣過(guò)濾器使用管道符返回?cái)?shù)的表達(dá)式。在這里,我們添加了過(guò)濾器,貨幣使用貨幣格式的打印費(fèi)用。
Enter fees: <input type="text" ng-model="student.fees"> fees: {{student.fees | currency}}
過(guò)濾器的過(guò)濾器
要僅顯示所需的主題,我們使用subjectName作為過(guò)濾器。
Enter subject: <input type="text" ng-model="subjectName"> Subject: <ul> <li ng-repeat="subject in student.subjects | filter: subjectName"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
排序過(guò)濾器
要通過(guò)標(biāo)記排序主題,我們使用orderBy標(biāo)記。
Subject: <ul> <li ng-repeat="subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
例子
下面的例子將展示上述所有的過(guò)濾器。
testAngularJS.html
<html> <head> <title>Angular JS Filters</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="" ng-controller="studentController"> <table border="0"> <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr> <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr> <tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr> <tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr> </table> <br/> <table border="0"> <tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr> <tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr> <tr><td>fees: </td><td>{{student.fees | currency}}</td></tr> <tr><td>Subject:</td><td> <ul> <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul> </td></tr> </table> </div> <script> function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
輸出
在Web瀏覽器打開(kāi)textAngularJS.html,看到以下結(jié)果:
- 詳解AngularJS中的filter過(guò)濾器用法
- AngularJS的內(nèi)置過(guò)濾器詳解
- 詳解AngularJS中自定義過(guò)濾器
- 使用AngularJS創(chuàng)建自定義的過(guò)濾器的方法
- AngularJS過(guò)濾器filter用法總結(jié)
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- AngularJS實(shí)現(xiàn)用戶(hù)登錄狀態(tài)判斷的方法(Model添加攔截過(guò)濾器,路由增加限制)
- AngularJS 過(guò)濾器(自帶和自建)詳解
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類(lèi)型的問(wèn)題
- Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
- Angular使用過(guò)濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫(xiě)轉(zhuǎn)換功能示例
相關(guān)文章
Angular.js自動(dòng)化測(cè)試之protractor詳解
Protractor是一個(gè)建立在WebDriverJS基礎(chǔ)上的端到端(E2E)的AngularJS JavaScript Web應(yīng)用程序測(cè)試框架,下面這篇文章主要給大家介紹了angular.js自動(dòng)化測(cè)試之protractor的相關(guān)資料,需要的朋友可以參考下。2017-07-07Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示
最近因?yàn)楣ぷ餍枰隽艘粋€(gè)選擇標(biāo)簽的功能,把一些標(biāo)簽展示給用戶(hù),用戶(hù)選擇自己喜歡的標(biāo)簽,就類(lèi)似我們?cè)谫?gòu)物網(wǎng)站看到的那種過(guò)濾標(biāo)簽似的,所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示的方法,下面來(lái)一起看看吧。2016-11-11全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念,但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下2016-08-08AngularJS初始化過(guò)程分析(引導(dǎo)程序)
這篇文章主要介紹了AngularJS初始化過(guò)程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過(guò)程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12Angularjs material 實(shí)現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03Angular實(shí)現(xiàn)表格自滾動(dòng)效果
這篇文章主要為大家介紹了如何通過(guò)Angular實(shí)現(xiàn)表格自動(dòng)滾動(dòng)的效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Angular有一定幫助,需要的可以參考一下2022-01-01