AngularJS自定義服務(wù)與fliter的混合使用
更新時(shí)間：2016年11月24日 11:48:41 作者：萌太隆
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
angular中，F(xiàn)ilter是用來(lái)格式化數(shù)據(jù)用的，比如項(xiàng)目中，有很多時(shí)候從后臺(tái)拿來(lái)的數(shù)據(jù)直接顯示用書是不明白其含義的，這時(shí)候我們需要自己格式化一下后再顯示在界面上，傳統(tǒng)的j我們需要些一長(zhǎng)串代碼，各種影射，而angular給我們提供的filter，確實(shí)要簡(jiǎn)介很多。
下面給大家介紹下angularJS自定義服務(wù)與fliter的混合使用，一起看看吧。
1. 創(chuàng)建自定義服務(wù)"$swl"
var app = angular.module('myApp', []);
app.service("$swl", function() {
this.after = function(data) {
return "("+data + " after,$swl";
};
this.before = function(data) {
return "($swl,before " + data+")";
}
})
2. 通過(guò)controller調(diào)用自定義服務(wù)
html代碼
<div ng-app="myApp" ng-controller="myCtrl">
{{name }}
</div>
controller代碼
app.controller("myCtrl", function($scope, $swl,$timeout) {
$scope.name = $swl.before("swl");
$timeout(function(){
$scope.name = $swl.after("swl");
},2000)
})
3. 與fliter的混合使用
html代碼
<div ng-app="myApp" ng-controller="myCtrl">
{{name | before}}
</div>
fliter代碼
app.filter("before",["$swl",function($swl){
return function(data){
return $swl.before("(filter,"+data+")");
}
}])
以上所述是小編給大家介紹的AngularJS自定義服務(wù)與fliter的混合使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了Angular4 反向代理Details實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
實(shí)例解析angularjs的filter過(guò)濾器
本文對(duì)angularjs的filter過(guò)濾器進(jìn)行系統(tǒng)介紹，附上實(shí)例解析，便于理解。具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過(guò)本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧2017-07-07
本文主要介紹AngularJS 迭代器過(guò)濾,這里提供了詳細(xì)的知識(shí)資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
這篇文章主要介紹了angularjs實(shí)現(xiàn)分頁(yè)和搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
本文主要講解AngularJS表格的知識(shí)內(nèi)容，這里整理了基礎(chǔ)資料，并附代碼和示例效果圖，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要為大家介紹了Angular獲取ngIf渲染的Dom元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了angular中使用echarts地圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06