AngularJS中filter的使用實(shí)例詳解
AngularJS中filter的使用實(shí)例詳解
一、格式化數(shù)字為貨幣格式。
<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>
script：
app.controller("crl", function($scope, $filter) {
$scope.money="4545";
});
顯示為
二、lowercase 格式化字符串為小寫(xiě)。
姓名為 {{ lastName | lowercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="AAA";
});
顯示為
aaa
三、uppercase 格式化字符串為大寫(xiě)。
姓名為 {{ lastName | uppercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="aaa";
});
顯示為
AAA
四、filter 從數(shù)組項(xiàng)中選擇一個(gè)子集。
<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ù)某個(gè)表達(dá)式排列數(shù)組。
輸入過(guò)濾器可以通過(guò)一個(gè)管道字符（|）和一個(gè)過(guò)濾器添加到指令中，該過(guò)濾器后跟一個(gè)冒號(hào)和一個(gè)模型名稱(chēng)。模型名字前加負(fù)號(hào)為降序，默認(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.多個(gè)模型排序（先按名字排序在按年齡排序）
<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的使用實(shí)例，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
關(guān)于AngularJs數(shù)據(jù)的本地存儲(chǔ)詳解
本文主要介紹了每一個(gè)獨(dú)立的JS文件或者不同的控制器如何實(shí)現(xiàn)數(shù)據(jù)的共享與交互的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定
本篇文章主要介紹了AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
angularjs封裝bootstrap時(shí)間插件datetimepicker
這篇文章主要介紹了angularjs封裝bootstrap時(shí)間插件datetimepicker 的相關(guān)資料,需要的朋友可以參考下2016-06-06
Angular懶加載模塊與Combined?Injector原理全面解析
這篇文章主要為大家介紹了Angular懶加載模塊與Combined?Injector原理全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了AngularJS路由刪除#符號(hào)解決的辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化
這篇文章主要為大家介紹了Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法
本篇文章主要介紹了動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
AngularJS報(bào)錯(cuò)$apply already in progress的解決方法分析
這篇文章主要介紹了AngularJS報(bào)錯(cuò)$apply already in progress的解決方法,較為詳細(xì)的分析了報(bào)錯(cuò)$apply already in progress的原理、處理技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
Angular項(xiàng)目中$scope.$apply()方法的使用詳解