AngularJS lets us format data or manipulate array collections through filters. In this example we’ll take a look at the formatting filters.<\/p>\n
To specify a filter in the HTML template, we can use the common data biding notation {{expression}} and add a pipe (|) after the expression to format its result, so we’ll have something like this {{expression | filter}}. If the filter accepts some parameters, we can specify them in sequence with the colon (:) character {{expression | filter:param1:param2}}.<\/p>\n
Angular exposes a simple API for creating a filter. Just as you would declare a controller with app.controller(\u2018myCtrl’, function(){});, you can create a new filter by appending .filter(\u2018filterName’, function(){}) to your Angular app.<\/p>\n
Requirement<\/strong> – To filter currency to format 10 digits to (555) 555-5255 and also have a credit card field that is mapped to AngularJS, like:<\/p>\n <input type=”text” ng-model=”customer.creditCardNumber”><\/p>\n which usually returns the whole number (4111111111111111). But to format credit card data to mask it with xxx the first 12 digits and only show the last 4.<\/p>\n Solution<\/strong> – We make use of a custom filter as<\/p>\n angular.module(‘ng’).filter(‘tel’, function () {<\/p>\n return function (tel) {<\/p>\n if (!tel) { return ”; }<\/p>\n var value = tel.toString().trim().replace(\/^\\+\/, ”);<\/p>\n if (value.match(\/[^0-9]\/)) {<\/p>\n return tel;<\/p>\n }<\/p>\n var country, city, number;<\/p>\n switch (value.length) {<\/p>\n case 10: \/\/ +1PPP####### -> C (PPP) ###-####<\/p>\n country = 1;<\/p>\n city = value.slice(0, 3);<\/p>\n number = value.slice(3);<\/p>\n break;<\/p>\n case 11: \/\/ +CPPP####### -> CCC (PP) ###-####<\/p>\n country = value[0];<\/p>\n city = value.slice(1, 4);<\/p>\n number = value.slice(4);<\/p>\n break;<\/p>\n case 12: \/\/ +CCCPP####### -> CCC (PP) ###-####<\/p>\n country = value.slice(0, 3);<\/p>\n city = value.slice(3, 5);<\/p>\n number = value.slice(5);<\/p>\n break;<\/p>\n default:<\/p>\n return tel;<\/p>\n }<\/p>\n if (country == 1) {<\/p>\n country = “”;<\/p>\n }<\/p>\n number = number.slice(0, 3) + ‘-‘ + number.slice(3);<\/p>\n return (country + ” (” + city + “) ” + number).trim();<\/p>\n };<\/p>\n });<\/p>\n Then use this filter in template<\/p>\n {{ phoneNumber | tel }}<\/p>\n <span ng-bind=”phoneNumber | tel”><\/span><\/p>\n By default, AngularJS will turn your HTML into normal text, in other words: make it safe so that by default people can\u2019t insert any unwanted HTML into your page.<\/p>\n For this example, let\u2019s assume you have some data that needs to be displayed on the page and that you have made an AngularJS App for it. I called mine commentApp with some spoofed (fake) data that I just hardcoded.<\/p>\n We\u2019ll assume that you have replaced line breaks (if necessary) with a <br \/><\/p>\n var commentApp = angular.module(‘commentApp’, []);<\/p>\n commentApp.controller(‘CommentCtrl’, function ($scope) {<\/p>\n $scope.comments = [<\/p>\n {<\/p>\n ‘name’ : ‘Some Guy’,<\/p>\n ‘text’ : ‘This is cool.’<\/p>\n },<\/p>\n {<\/p>\n ‘name’ : ‘John Doe’,<\/p>\n ‘text’: ‘Hi, I am John Doe. This is a single-line comment to be displayed with AngularJS’<\/p>\n },<\/p>\n {<\/p>\n ‘name’ : ‘Jane Doe’,<\/p>\n ‘text’ : ‘Jane doe is the female version of “John Doe”.<br \/>This is a new line to be displayed with AngularJS’<\/p>\n }<\/p>\n ];<\/p>\n });<\/p>\n You could then use the following HTML to output the data:<\/p>\n <section id=”comments” ng-app=”commentApp” ng-controller=”CommentCtrl”><\/p>\n <ul id=”comment-list”><\/p>\n <li ng-repeat=”comment in comments”><\/p>\n <a href=”#” class=”profile-link”><\/p>\n {{comment.name}}<\/p>\n <\/a><\/p>\n <p><\/p>\n {{comment.text}}<\/p>\n <\/p><\/p>\n <\/li><\/p>\n <\/ul><\/p>\n <\/section><\/p>\n The problem now is, that instead of a new line, the text \u201c<br \/>\u201d will be part of the comment text.<\/p>\n You now have to use $sce to run your output through a filter, which you can specify to allow the HTML.<\/p>\n We can implement this using $sce.trustAsHtml() by adding a filter to our code (outside of the controller). This custom filter will make sure that our HTML doesn\u2019t get filtered out by AngularJS 1.2\/AngularJS 1.3 or later<\/p>\n We will name this filter \u201cunsafe\u201d. It gets passed a value, which we will return as trusted HTML output.<\/p>\n commentApp.filter(‘unsafe’, function($sce) {<\/p>\n return function(val) {<\/p>\n return $sce.trustAsHtml(val);<\/p>\n };<\/p>\n });<\/p>\n Now, modify your HTML code from this:<\/p>\n <p><\/p>\n {{comment.text}}<\/p>\n <\/p><\/p>\n And change it to this:<\/p>\n <p ng-bind-html=”comment.text | unsafe”><\/p><\/p>\n This will run your comment.text through the \u201cunsafe\u201d filter we just created, and once again, your output will have the HTML parsed properly.<\/p>\n","protected":false},"excerpt":{"rendered":" AngularJS lets us format data or manipulate array collections through filters. In this example we’ll take a look at the formatting filters. To specify a filter in the HTML template, we can use the common data biding notation {{expression}} and add a pipe (|) after the expression to format its result, so we’ll have something…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8417],"tags":[8429],"class_list":["post-72343","page","type-page","status-publish","hentry","category-angular-js-web-development","tag-output-formatting"],"acf":[],"yoast_head":"\nPreserve HTML<\/h4>\n