AngularJS中filter的使用實例詳解
更新時間：2017年08月25日 14:53:12 作者：柳絮飛祭奠
這篇文章主要介紹了AngularJS中filter的使用實例詳解的相關(guān)資料,這里提供實例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下
AngularJS中filter的使用實例詳解
一、格式化數(shù)字為貨幣格式。
<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>
script：
app.controller("crl", function($scope, $filter) {
$scope.money="4545";
});
顯示為
二、lowercase 格式化字符串為小寫。
姓名為 {{ lastName | lowercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="AAA";
});
顯示為
aaa
三、uppercase 格式化字符串為大寫。
姓名為 {{ lastName | uppercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="aaa";
});
顯示為
AAA
四、filter 從數(shù)組項中選擇一個子集。
<div>{{array|filter:"s"}}</div>
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias'
}, {
name : 'Jeff'
}, {
name : 'Brian'
}, {
name : 'Igor'
}, {
name : 'James'
}, {
name : 'Brad'
} ];
});
顯示為
[{"name":"Tobias"},{"name":"James"}]
Tobias
James
五、orderBy 根據(jù)某個表達(dá)式排列數(shù)組。
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱。模型名字前加負(fù)號為降序，默認(rèn)為升序
<div ng-repeat="item in array|orderBy:'-name'">降序 {{item.name}}</div>
<div ng-repeat="item in array|orderBy:'name'">升序 {{item.name}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'Brad',age:"19"
} ,{
name : 'aaas',age:"19"
}];
});
顯示為
降序 Tobias 降序 Jeff 降序 James 降序 Igor 降序 Brian 降序 Brad 降序 aaas 升序 aaas 升序 Brad 升序 Brian 升序 Igor 升序 James 升序 Jeff 升序 Tobias
5.1.多個模型排序（先按名字排序在按年齡排序）
<div ng-repeat="item in array|orderBy:['name','age']">升序 {{item.name}}{{item.age}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'adsd',age:"19"
} ,{
name : 'adsd',age:"20"
}];
});
顯示為
升序 adsd19 升序 adsd20 升序 Brian19 升序 Igor55 升序 James19 升序 Jeff19 升序 Tobias18
以上就是AngularJS filter的使用實例，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Angular 獨立組件入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
用AngularJS來實現(xiàn)監(jiān)察表單按鈕的禁用效果
本篇文章主要介紹了用AngularJS來實現(xiàn)監(jiān)察表單按鈕的禁用效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了SeaJS 與 RequireJS 的差異對比,本文主要對CMD規(guī)范和AMD規(guī)范的弊端做了對比,并做出了一個總結(jié),需要的朋友可以參考下2014-12-12
今天小編就為大家分享一篇angularjs手動識別字符串中的換行符方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular 是一個流行的框架，用于構(gòu)建動態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-06-06
最近這兩天公司正在做一個PDF協(xié)議下載的功能，目前的解決方案可以分為完全前端生成和后端生成兩種方式。前端生成PDF有jsPDF 和pdfmake 兩種方式，下面這篇文章就給大家分享下如何在Angular.JS中接收并下載PDF的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
這篇文章主要介紹了淺談Angular7 項目開發(fā)總結(jié)，本文在此做一次遇到問題的總結(jié)，以便知識的掌握，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文我們將介紹 Reactive Form 表單驗證的相關(guān)知識，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Angularjs制作簡單的路由功能demo，剛剛開始學(xué)習(xí)Angularjs,做的不好，還請見諒。2015-04-04