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