AngularJS自定义服务与fliter的混合使用
更新时间：2016年11月24日 11:48:41 作者：萌太隆
这篇文章主要介绍了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的混合使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了angularjs创建弹出框实现拖动效果的相关资料，angularjs modal模态框创建可拖动的指令，感兴趣的小伙伴们可以参考一下2016-01-01
下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Angular 多级路由实现登录页面跳转(小白教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
AngualrJS是一个很贴心的web应用框架，本篇通过jQuery和Angular两种方式来实现同一个实例，从而体验两者的不同点以及AngularJS的迷人之处2016-02-02
基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解
最近在学习 angular，记录一下昨天的进展，解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色，避免对色彩的硬编码，这篇文章主要介绍了基于 angular material theming 机制修改 mat-toolbar 的背景色,需要的朋友可以参考下2022-10-10
Angular 2父子组件数据传递之@Input和@Output详解 (上)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。2017-07-07
angularjs功能在项目开发中经常会用到，本文给大家总结了八种angularjs最常用的功能，感兴趣的朋友一起学习吧2016-02-02
这篇文章主要介绍了Angular7.2.7路由使用初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了Angular ElementRef简介及其使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
最新评论