AngularJS自訂服務與fliter的混合使用_AngularJS

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的混合使用，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！