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 相关文章推荐
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
数据库专业英语
2012/11/30 面试题
垃圾回收的优点和原理
2014/05/16 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
公积金单位接收函
2014/01/11 职场文书
给男朋友的道歉信
2014/01/12 职场文书
料理师求职信
2014/01/30 职场文书
信息总监管理职责范本
2014/03/08 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
代理人委托书
2014/09/16 职场文书
公积金具结保证书
2015/05/11 职场文书
冰雪公主观后感
2015/06/16 职场文书