angularjs之filter過(guò)濾器

現(xiàn)在公司用ionic，就是基于angularjs封裝了一些api用于webapp，最近用的angularjs的filter確實(shí)省了很多代碼，現(xiàn)在總結(jié)一下！

成都創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元澄邁做網(wǎng)站,已為上家服務(wù),為澄邁各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

ng比較雞肋的過(guò)濾器，這里就一筆帶過(guò)吧！雞湯類常用的filter后面上例子。

lowercase(小寫(xiě))

{{ lastName | lowercase }}

uppercase(大寫(xiě))

{{ lastName | uppercase }}

number(格式化數(shù)字)

number過(guò)濾器可以為一個(gè)數(shù)字加上千位分割，像這樣，123,456,789。同時(shí)接收一個(gè)參數(shù)，可以指定小float型保留幾位小數(shù)：

{{ num | number : 2 }}

currency (貨幣處理)

{{num | currency : '￥'}}

json(格式化json對(duì)象)

{{ jsonTest | json}}

作用就和我們熟悉的JSON.stringify()一樣

limitTo(限制數(shù)組長(zhǎng)度或字符串長(zhǎng)度)

{{ childrenArray | limitTo : 3 }}  //將會(huì)顯示數(shù)組中的前3項(xiàng)

filter(匹配子串)

用來(lái)處理一個(gè)數(shù)組，然后可以過(guò)濾出含有某個(gè)子串的元素，作為一個(gè)子數(shù)組來(lái)返回。可以是字符串?dāng)?shù)組，也可以是對(duì)象數(shù)組。如果是對(duì)象數(shù)組，可以匹配屬性的值。它接收一個(gè)參數(shù)，用來(lái)定義子串的匹配規(guī)則。

html

angularjs之filter過(guò)濾器


        filter 匹配子串(以下寫(xiě)法只是方便觀察)
        {{ webArr | filter : 'n' }} 
        {{ webArr | filter : 25 }} 
        {{ webArr | filter : {name : 'l'} }} 
        {{ webArr | filter : fun }}

angularjs之filter過(guò)濾器

js

angularjs之filter過(guò)濾器

$scope.webArr = [
                    {name:'nick',age:25},
                    {name:'ljy',age:28},
                    {name:'xzl',age:28},
                    {name:'zyh',age:30}
                ];
$scope.fun = function(e){return e.age>25;};

angularjs之filter過(guò)濾器

效果展示：

filter 匹配子串(以下寫(xiě)法只是方便觀察)
[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

日期類

日期過(guò)濾器應(yīng)該是常用過(guò)濾器中最簡(jiǎn)單的吧！

yyyy--表示年份；
MM--月份（必須大寫(xiě)）；
dd--日期；
hh--時(shí)；
mm--分（必須小寫(xiě)）；
ss--秒；
EEEE--星期；
hh:mm--形式是24小時(shí)制；
h:mma--12小時(shí)制；
其中年、月、日、時(shí)、分、秒或 / ： - 等自己試做搭配吧！

angularjs之filter過(guò)濾器

angularjs之filter過(guò)濾器

日期1的顯示效果：

2016/11/19 11:59:05 Saturday

日期2的顯示效果：

2016年11月19日 12:01PM Saturday

日期3的顯示效果：

2016年11月22日 10時(shí)42分09秒

日期4的顯示效果：

2016/11/22 11:16:58

orderBy排序（個(gè)人認(rèn)為第七例最佳寫(xiě)法）

ng-repeat生成一個(gè)獨(dú)立的scope作用域，直接在ng-repeat循環(huán)后加管道orderBy排序。

用法很簡(jiǎn)單，但有坑需注意兩點(diǎn)：

參數(shù)引號(hào)勿忘；
參數(shù)形式--直接寫(xiě)成age，不用寫(xiě)成item2.age。

3 按年齡排序(默認(rèn)升序)

angularjs之filter過(guò)濾器

    
        3 按年齡排序(默認(rèn)升序)
        
            
                name
                
            
            
                age
                
            
            
                stature

angularjs之filter過(guò)濾器

效果展示：

angularjs之filter過(guò)濾器

3 按年齡排序(默認(rèn)升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

angularjs之filter過(guò)濾器

4 按年齡排序(加參數(shù)true則為倒序即降序)

angularjs之filter過(guò)濾器

angularjs之filter過(guò)濾器

效果展示：

angularjs之filter過(guò)濾器

4 按年齡排序(加參數(shù)true則為倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

angularjs之filter過(guò)濾器

5 想先按年齡升序在按身高降序(全是降序了，達(dá)不到效果，見(jiàn)第7例)
我曾就天真的這樣寫(xiě)過(guò)^*^

angularjs之filter過(guò)濾器

angularjs之filter過(guò)濾器

效果展示：

angularjs之filter過(guò)濾器

5 想先按年齡升序在按身高降序(全是降序了，達(dá)不到效果，見(jiàn)第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

angularjs之filter過(guò)濾器

6 先按年齡在按身高排序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)

angularjs之filter過(guò)濾器

angularjs之filter過(guò)濾器

效果展示：

angularjs之filter過(guò)濾器

6 先按年齡在按身高排序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

angularjs之filter過(guò)濾器

7 先按年齡升序在按身高降序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)

在參數(shù)前加負(fù)號(hào)即可實(shí)現(xiàn)倒序

angularjs之filter過(guò)濾器

angularjs之filter過(guò)濾器

效果展示：

angularjs之filter過(guò)濾器

!!7 先按年齡升序在按身高降序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

angularjs之filter過(guò)濾器

個(gè)人覺(jué)得ng內(nèi)置的過(guò)濾器好多都比較雞肋。個(gè)性化的需求自定義的過(guò)濾器吧。

自定義過(guò)濾器

自定義過(guò)濾器就是返回一個(gè)函數(shù)，函數(shù)又返回你要的值即可！

實(shí)例：

angularjs之filter過(guò)濾器

angular.module('youAppName',[])
                .filter('youFilterName',function(){
                    return function(){
                      //你的處理代碼
                        return result;//返回你要的值
                    }
                })

angularjs之filter過(guò)濾器

自定義一個(gè)求和的過(guò)濾器

html

    
        !!1 求和

用法：

管道前后所有參數(shù)即為和

js

angularjs之filter過(guò)濾器

var nickAppModule=angular.module('nickApp',[]);
        nickAppModule
                //求和
                .filter('sumNick',function(){
                    return function(){
                        var arr=Array.prototype.slice.call(arguments),sum=0;
                        for(var i= 0,len=arr.length;i
arguments--函數(shù)接受的參數(shù)集合，類數(shù)組；
Array.prototype.slice.call(arguments)
這句將類數(shù)組轉(zhuǎn)為數(shù)組； 
 sum+=arr[i]?arr[i]:0;
總和sum等于數(shù)組的每個(gè)元素累加的和。避免后臺(tái)為傳值，而又將次參數(shù)傳人自定義filer函數(shù)作為參數(shù)，容錯(cuò)時(shí)寫(xiě)成0保險(xiǎn)。
　　自定義一個(gè)求百分百的過(guò)濾器（求保留小數(shù)點(diǎn)后兩位百分比）
html
    
        !!2 求百分比
        
            male
            
        
        
            female
            
        
        
            gay
            
        
    
用法：
 分子寫(xiě)在管道前面，管道后面的所有參數(shù)和加管道前的參數(shù)和則為分母
js
var nickAppModule=angular.module('nickApp',[]);
        nickAppModule
//百分比
                .filter('percentNick',function(){
                    return function(){
                        var arr=Array.prototype.slice.call(arguments),sum=0;
                        for(var i= 0,len=arr.length;i
這里就是在上面求和的filter上多了一句：
sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"
Math內(nèi)置函數(shù)，Math.round四舍五入保留整數(shù)；
將總和乘以10000除以100拼接百分比號(hào)，即保留兩位小數(shù)。            
            
                        

            當(dāng)前文章：angularjs之filter過(guò)濾器            

            標(biāo)題URL：http://weahome.cn/article/pedpje.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

angularjs之filter過(guò)濾器

lowercase(小寫(xiě))

uppercase(大寫(xiě))

number(格式化數(shù)字)

currency (貨幣處理)

json(格式化json對(duì)象)

limitTo(限制數(shù)組長(zhǎng)度或字符串長(zhǎng)度)

filter(匹配子串)

html

js

效果展示：

日期類

orderBy排序（個(gè)人認(rèn)為第七例最佳寫(xiě)法）

3 按年齡排序(默認(rèn)升序)

4 按年齡排序(加參數(shù)true則為倒序即降序)

6 先按年齡在按身高排序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)

7 先按年齡升序在按身高降序(多個(gè)參數(shù)寫(xiě)出數(shù)組形式)

自定義過(guò)濾器

實(shí)例：

自定義一個(gè)求和的過(guò)濾器

html

js

自定義一個(gè)求百分百的過(guò)濾器（求保留小數(shù)點(diǎn)后兩位百分比）

html

js

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管