Angularjs過(guò)濾器使用詳解
給大家介紹下什么是 AngularJS?
AngularJS是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件。它的創(chuàng)新點(diǎn)在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都是通過(guò)瀏覽器端的Javascript實(shí)現(xiàn)，這也使得它能夠完美地和任何服務(wù)器端技術(shù)結(jié)合。
AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來(lái)讓瀏覽器做我想要的事。
AngularJS提供了過(guò)濾器來(lái)對(duì)輸入輸出數(shù)據(jù)格式化。下面開始給大家介紹Angularjs過(guò)濾器使用，一起看看吧
•在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>
相關(guān)文章
在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來(lái)
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來(lái)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，對(duì)angularjs 谷歌地圖相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下2018-08-08
前端技術(shù)的發(fā)展是如此之快，各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡(jiǎn)直讓人目不暇接，緊跟時(shí)代潮流，學(xué)習(xí)掌握新知識(shí)自然是不敢怠慢。下面這篇文章主要給大家介紹了AngularJS中run方法的巧妙運(yùn)用,需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了AngularJS延遲加載html template 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
AngularJS實(shí)現(xiàn)的base64編碼與解碼功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的base64編碼與解碼功能,結(jié)合實(shí)例形式分析了AngularJS字符串base64編碼與解碼操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了webapp框架AngularUI的demo改造之路,需要的朋友可以參考下2014-12-12
Angular用來(lái)控制元素的展示與否的原生指令介紹
這篇文章主要介紹了Angular用來(lái)控制元素的展示與否的原生指令的用法及區(qū)別，非常詳細(xì)，這里推薦給小伙伴們2015-01-01
Angular Universal服務(wù)器端渲染避免 window is not&
這篇文章主要介紹了Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本篇文章主要介紹了Angular4 ElementRef的應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02