源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-11-23 13:11 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularJS自定义服务与fliter的混合使用
angular中,Filter是用来格式化数据用的,比如项目中,有很多时候从后台拿来的数据直接显示用书是不明白其含义的,这时候我们需要自己格式化一下后再显示在界面上,传统的j我们需要些一长串代码,各种影射,而angular给我们提供的filter,确实要简介很多。 下面给大家介绍下angularJS自定义服务与fliter的混合使用,一起看看吧。 [b] 1. 创建自定义服务"$swl"[/b]
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+")"; 
} 
})
[b]2. 通过controller调用自定义服务[/b] 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) 
})
[b]3. 与fliter的混合使用[/b] 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的混合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部