AngularJS中的過濾器使用詳解
過濾器是用來更改修改數(shù)據(jù),并且可以在表達(dá)式或使用管道符指令將其歸入。以下是常用的過濾器的列表。
小寫過濾器
添加小寫的過濾器,使用管道符的表達(dá)式。在這里添加小寫過濾器,以小寫字母打印學(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}}
貨幣濾波器
加幣過濾器使用管道符返回數(shù)的表達(dá)式。在這里,我們添加了過濾器,貨幣使用貨幣格式的打印費(fèi)用。
Enter fees: <input type="text" ng-model="student.fees"> fees: {{student.fees | currency}}
過濾器的過濾器
要僅顯示所需的主題,我們使用subjectName作為過濾器。
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>
排序過濾器
要通過標(biāo)記排序主題,我們使用orderBy標(biāo)記。
Subject: <ul> <li ng-repeat="subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
例子
下面的例子將展示上述所有的過濾器。
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瀏覽器打開textAngularJS.html,看到以下結(jié)果:
- 詳解AngularJS中的filter過濾器用法
- AngularJS的內(nèi)置過濾器詳解
- 詳解AngularJS中自定義過濾器
- 使用AngularJS創(chuàng)建自定義的過濾器的方法
- AngularJS過濾器filter用法總結(jié)
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
- AngularJS 過濾器(自帶和自建)詳解
- Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
- Angular使用過濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫轉(zhuǎn)換功能示例
相關(guān)文章
Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時顯示
最近因?yàn)楣ぷ餍枰隽艘粋€選擇標(biāo)簽的功能,把一些標(biāo)簽展示給用戶,用戶選擇自己喜歡的標(biāo)簽,就類似我們在購物網(wǎng)站看到的那種過濾標(biāo)簽似的,所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時顯示的方法,下面來一起看看吧。2016-11-11全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念,但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說明的相關(guān)資料,需要的朋友可以參考下2016-08-08Angularjs material 實(shí)現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03