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)文章
AngularJS全局警告框?qū)崿F(xiàn)方法示例
這篇文章主要介紹了AngularJS全局警告框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了AngularJS全局警告框的實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
本篇文章主要介紹了AngularJS 路由 resolve用法，詳細(xì)的介紹了resolve用法，想要了解resolve用法的朋友可以了解一下2017-04-04
本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
這篇文章主要介紹了angularJS中$apply()方法詳解,需要的朋友可以參考下2015-01-01
如何在AngularJs中調(diào)用第三方插件庫(kù)
在AngularJs中我們會(huì)不可避免的使用第三方庫(kù)，這篇文章主要介紹了如何在AngularJs中調(diào)用第三方插件庫(kù)，有興趣的可以了解下2017-05-05
AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法
今天小編就為大家分享一篇AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用Angular CLI生成 Angular 5項(xiàng)目教程詳解
這篇文章主要介紹了使用Angular CLI生成 Angular 5項(xiàng)目的教程詳解 ,需要的朋友可以參考下2018-03-03
angular ng-click防止重復(fù)提交實(shí)例
本篇文章主要介紹了angular ng-click防止重復(fù)提交實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05