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 原型学习总结
Oct 29 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
js实现菜单跳转效果
Dec 11 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
微信小程序-详解数据缓存
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
PHP中动态显示签名和ip原理
2007/03/28 PHP
教你如何使用php session
2013/10/28 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
详解JS数值Number类型
2018/02/07 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python获取糗百图片代码实例
2013/12/18 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
python中enumerate函数用法实例分析
2015/05/20 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
校运会入场式解说词
2014/02/10 职场文书
环保建议书500字
2014/05/14 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
小学班主任事迹材料
2014/12/17 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
教师教育教学随笔
2015/08/15 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书