這次系統學習了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...