AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
angularjs,自定义服务,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的混合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对wanshiok.com网站的支持!


angularjs,自定义服务,angularjs,fliter  
上一篇:Bootstrop实现多级下拉菜单功能  下一篇:微信小程序-详解数据缓存