深入理解angularjs過(guò)濾器
更新時(shí)間：2016年05月25日 15:08:03 投稿：jingxian
下面小編就為大家?guī)?lái)一篇深入理解angularjs過(guò)濾器。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
•在html文件中和在js文件中使用
$scope.form_time = $filter('date')($scope.time, 'yyyy-MM-dd HH:mm:ss');
<p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
•內(nèi)部過(guò)濾器和自定義過(guò)濾器
.filter('my_data_format',[function(){
return function(data,str,sss){
console.log('data: ',data,' str: ',str,' sss: ',arguments[2]);
}
}]);
//var1就是第一個(gè)參數(shù)data， 123是第二個(gè)參數(shù)str， this是第三個(gè)參數(shù)
<p>{{var1 | my_data_format : 123 : 'this'}}</p>
//對(duì)傳入的數(shù)據(jù)進(jìn)行處理
.filter('my_data_format',[function(){
return function(data,str){
var arr=[];
angular.forEach(data, function(one_list){
if(one_list.status == str){
arr.push(one_list);
}
});
return arr;
}
}]);
//過(guò)濾器可以用在綁定的值中,也可以用在ng-if="(lists | my_data_format: '2').length>0", 和ng-show等；類似的表達(dá)式中。作為判斷語(yǔ)句
<p ng-repeat = "list in lists">姓名:{{list.name}},人數(shù){{(lists | my_data_format: '2').length}}</p>
以上這篇深入理解angularjs過(guò)濾器就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí)筆記之表格的相關(guān)資料,需要的朋友可以參考下2015-05-05
Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解
今天小編就為大家分享一篇Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
AngularJS 最常用的八種功能(基礎(chǔ)知識(shí))
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話，在結(jié)果反回來(lái)之前，頁(yè)面是沒(méi)有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類2015-12-12
AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了AngularJS控制器數(shù)據(jù)共享的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Angular本身監(jiān)督所有Angular組件和指令的生命周期 。為了在開(kāi)發(fā)應(yīng)用程序時(shí)順利進(jìn)行，您必須了解結(jié)果的生命周期。組件是任何Angular應(yīng)用程序的主要構(gòu)建塊。因此，必須了解它們才能理解組件生命周期的處理步驟。只有這樣才能在應(yīng)用程序的開(kāi)發(fā)中實(shí)現(xiàn)。2021-05-05
這篇文章主要介紹了AngularJS遍歷獲取數(shù)組元素的方法,涉及AngularJS簡(jiǎn)單的數(shù)組遍歷及元素獲取相關(guān)操作技巧,需要的朋友可以參考下2017-11-11