ANGULARJS Custom Service mixed with Fliter _angularjs

In angular, filter is used to format data. For example, the project, there are many times from the background to show the data directly with the book is not understand its meaning, at this time we need to format their own after the display in the interface, the traditional J we need a long string of code, all kinds of innuendo, and angular to provide us with the filter, does have to introduce a lot.

Below to introduce the next ANGULARJS custom service and Fliter mixed use, take a look at it.

1. Create custom Service "$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. Invoke custom Service via controller

HTML code

<div ng-app= "myApp" ng-controller= "Myctrl" > 
{name}} 
</div>

Controller code

App.controller ("Myctrl", Function ($scope, $SWL, $timeout) { 
$scope. Name = $swl. Before ("SWL"); 
$timeout (function () { 
$scope. Name = $swl. After ("SWL"); 
},2000) 
})

3. Mixed use with Fliter

HTML code

<div ng-app= "myApp" ng-controller= "Myctrl" > 
{{name | before}} 
</div>

Fliter Code

App.filter ("Before", [$SWL, Function ($SWL) {return 
function (data) {return 
$swl. Before (filter, +data+ ")"); 
} 
}])

The above mentioned is a small set to introduce the ANGULARJS custom service and Fliter mixed use, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!