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


Posted in Javascript onNovember 24, 2016

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的混合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 #Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 #Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python类的基础入门知识
2008/11/24 Python
爬山算法简介和Python实现实例
2014/04/26 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python如何查看微信消息撤回
2018/11/27 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
python生成特定分布数的实例
2019/12/05 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
机电一体化自荐信
2013/12/10 职场文书
家长寄语大全
2014/04/02 职场文书
委托公证书样本
2015/01/23 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
python实现简单聊天功能
2021/07/07 Python