欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2021-01-24 11:09:45|栏目:AngularJS|点击:

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清除浏览器缓存的方法

栏    目:AngularJS

下一篇:详解AngularJS中$filter过滤器使用(自定义过滤器)

本文标题:AngularJS自定义服务与fliter的混合使用

本文地址:http://www.codeinn.net/misctech/50523.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有