AngularJS Filter過濾器詳情

2021-07-11 22:51:12 字數 2875 閱讀 6714

這次系統學習了filter,特地整理了一下filter,因為它確實帶來了很多便利。另外它包含自帶的filter,也可以自定義。

在表示式中應用filters (過濾器),需要遵循格式如下:

}	即	}
其實就是filter的疊加--前一filter的輸出結果作為後一filter的輸入資料來源,需要遵循格式如下:

}   即  表示式(expression)使用filter1過濾後再使用filter2過濾...
filter後面可以跟乙個或多個引數,用來幫助實現特殊要求、需求的filter,需要遵循格式如下:

}
angularjs為我們提供了9個內建的過濾器,分別是:

1、currency貨幣格式化

}             //結果:$12.21

} //結果:¥12.21

2、date日期格式化

一. 本地日期格式化													

1. } //結果: may 20, 2016 10:36:52 pm

2. } //結果: 5/20/16 10:36 pm

3. } //結果: friday, may 20, 2016

4. } //結果: may 20, 2016

5. } //結果: may 20, 2016

6. } //結果: 5/20/16

7. } //結果: 10:36:52 pm

8. } //結果: 10:36 pm

二. 年月日時分秒毫秒

} //結果:2016-05-20 22:43:52:592 friday

1. 年份格式

'yyyy'/'yy'/'y' 返回的是:2016/16/2016 (四位年份/兩位年份/一位年份)

2. 月份格式

'mmmm'/'mmm'/'mm'/'m' 返回的是:may/may/05/5 (英文月份/英文月份簡寫/兩位數月份/一年中的第幾個月)

3. 日格式

'dd'/'d'/'eeee'/'eee' 返回的是:20/20/friday/fri (數字日期/乙個月的第幾天/英文星期/英文星期簡寫)

4. 小時格式

'hh'/'h'/'hh'/'h' 返回的是:22/22/10/10 (24小時制/24小時制第幾小時/12小時制/12小時制第幾小時)

5. 分鐘格式

'mm'/'m' 返回的是:43/43 (數字分鐘數/乙個小時中的第幾分鐘)

6.秒格式

'ss'/'s' 返回的是:52/52 (數字秒數/一分鐘中的第幾秒)

7. 毫秒數格:

'sss' 返回的是:592 (毫秒數)

8. 字元格式

上下午標識:} 返回的是:pm

四位時區標識:} 返回的是:+0800

3、filter查詢

,  

, ] | filter:'n'}} //查詢含有有s的行

//結果:[,]

, ,

] | filter: }} //查詢name含有kobe的行

//結果:

4、json格式化

|json }}

結果:

5、limitto字串物件的擷取

}

}返回的結果分別是:

i love

mcgrady

, ,

] | limitto:1 }}

結果:

6、uppercase大寫轉換

}

結果:i love tracy mcgrady

7、lowercase小寫轉換

}

結果:i love tracy mcgrady

8、number格式化

}

}結果:

3.14

5,201,314

9、orderby排序

,  

, ] | orderby: 'id': true }} //根據id降序排列

, ,

] | orderby: 'id' }} //根據id公升序排列

自定義filter

格式大致如下:

return function(需要過濾的物件,過濾器引數1,過濾器引數2,...)

});

內部返回的方法包含了多個引數,乙個是輸入的值,就是我們過濾器接受的值。後面的是過濾器引數,可以有多個。

例如:

$scope.day = new date().getday();

});

var daynames = ["星期日", "星期一", "星期二", "星期三",

"星期四", "星期五", "星期六"];

return function (input) ;

});today is }

結果:

angularjs filter 詳解 過濾器

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

Vue 過濾器案例(全域性過濾器和區域性過濾器)

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat,但是控制不同作用,乙個是全域性的...

過濾器(6) 過濾器的攔截

本系列部落格彙總在這裡 過濾器彙總 我們來做個測試,寫乙個過濾器,指定過濾的資源為 index.jsp,然後我們在瀏覽器中直接訪問 index.jsp,你會發現過濾器執行了!但是,當我們在 helloservlet 中使用伺服器端的跳轉request.getrequestdispathcer ind...