angularjs filter 詳解 過濾器

2021-07-22 10:05:41 字數 1997 閱讀 8050

系統的學習了一下angularjs,發現angularjs的有些思想根php的模組smarty很像,例如資料繫結,filter。如果對smarty比較熟悉的話,學習angularjs會比較容易一點。這篇簡單說一下angularjs的filter功能,angularjs的filter功能可分為二種,一種是內建的過濾器,一種是自定義的。

一,內建的過濾器

1,uppercase,lowercase大小轉換 檢視

複製列印?

}     

//結果:lower cap string

}         

//結果:tank is good

|這裡的豎線是一種管道功能,如果對linux比較熟悉的話,這塊的|根linux的管道功能,基本是一樣的

2,json格式化 檢視

複製列印?

| json }}    

//結果:

注意:bza沒格式前是沒有雙引號的,格式化後就轉換成了json資料了。

3,date格式化 檢視

複製列印?

}                          

//結果:may 3, 2011

}     

//結果:05/03/2011 @ 6:39am

}    

//結果:2011-05-03 06:39:08

4,number格式化 檢視

複製列印?

}    

//結果:1.2

}       //結果:1,234,567

5,currency貨幣格式化 檢視

複製列印?

}                 

//結果:$250.00

}       

//結果:rmb ¥ 250.00

6,filter查詢 檢視

複製列印?

,  ,    

] | filter:'s'

}}    

//查詢含有有s的行

//上例結果:[,]

,  ,  

] | filter: }}   

//查詢name為iphone的行

//上例結果:

7,limitto字串,對像的擷取 檢視

複製列印?

}           

//結果:i love

}          

//結果:tank

,  ,  

] | limitto:1 }}     //結果:

8,orderby對像排序 檢視

複製列印?

,  ,    

] | orderby:'id'

:true }}        

//根id降序排

,  ,  

] | orderby:'id'

}}           

//根據id公升序排

二,自定filter功能

我找了乙個基本angularjs的mvc框架,phonecat,自定義filter也是在這基礎寫的,這個框架挺好用的。

1,filters.js新增乙個module 檢視

複製列印?

angular.module(

'tanktest'

, ).filter(

'tankreplace'

, function

() ;  

});  

檢視複製列印?

var, [  

'ngroute'

,  'phonecatcontrollers'

,  'facebookcontrollers'

,  'tanktest'

]);  

3,html中呼叫 檢視

複製列印?

}   

//結果:***** is good

注意:| lowercase |tankreplace管道命令可以有多個

:

AngularJS Filter過濾器詳情

這次系統學習了filter,特地整理了一下filter,因為它確實帶來了很多便利。另外它包含自帶的filter,也可以自定義。在表示式中應用filters 過濾器 需要遵循格式如下 即 其實就是filter的疊加 前一filter的輸出結果作為後一filter的輸入資料來源,需要遵循格式如下 即 表...

過濾器詳解

過濾器詳解 注 繼承介面的過濾器需要先繼承 filterattribute類才行 過濾器頭部 attributeusage attributetargets.method,allowmultiple true,inherited true 1 validon使用按位 或 運算子組合的一組值,用於指示...

shiro過濾器詳解

常用的過濾器為authenticatingfilter,具體看一看它是怎麼實現的。先說一下servlet的過濾器鏈的規則 servlet中過濾器filter只有三個方法,當我們自定義過濾器的時候需要實現 主要就是dofilter方法,他的實現方式是這樣子的 public void dofilter ...