AngularJS

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > AngularJS > angularjs 自定义服务

AngularJS自定义服务与fliter的混合使用

作者:萌太隆

这篇文章主要介绍了AngularJS自定义服务与fliter的混合使用的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

angular中,Filter是用来格式化数据用的,比如项目中,有很多时候从后台拿来的数据直接显示用书是不明白其含义的,这时候我们需要自己格式化一下后再显示在界面上,传统的j我们需要些一长串代码,各种影射,而angular给我们提供的filter,确实要简介很多。

下面给大家介绍下angularJS自定义服务与fliter的混合使用,一起看看吧。

 1. 创建自定义服务"$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调用自定义服务

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自定义服务与fliter的混合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
阅读全文