Using helper methods while templating with Angular JS Using helper methods while templating with Angular JS angularjs angularjs

Using helper methods while templating with Angular JS


If you are only interested in data display, then as pkozlowski.opensource already mentioned, filters are the "Angular way" of formatting data for display. If the existing date filter is not sufficient, I suggest a custom filter. Then your HTML will look more "angular":

<span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span>

The above syntax makes it clear that you're (only) formatting.

Here's a custom filter:

angular.module('OurFormatters', []). filter('dateFormatter', function() {               // filter is a factory function   return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params       // ... add date parsing and formatting code here ...       if(formattedDate === "" && emptyStrText) {            formattedDate = emptyStrText;       }       return formattedDate;   } });

By encapsulating our filters/formatters into a module, it is also easier to (re)use them in multiple controllers -- each controller that needs them just injects OurFormatters.

Another benefit of filters is that they can be chained. So if someday you decide that in some places in your app empty dates should show nothing (be blank), whereas in other places in your app empty dates should show 'TBD', a filter could solve the latter:

<span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span>

Or your custom filter can take one or more arguments (the above example supports an argument):

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>


You simply add the method to your controller. Something like this:

<div class="post-info" ng-controller="MyCtrl">    <span class="posted-date">Posted {{parseDate(CreatedDate)}}</span></div>

Then the controller:

function MyCtrl($scope){     $scope.parseDate = function(jsonDate) {        //date parsing functionality        return newParsedDate;     }}


Looking at the presented use case your best call would be the date filter described here: http://docs.angularjs.org/api/ng.filter:dateUsing this filter you could write:

{{CreatedDate | date}}

The mentioned filter is customizable so you could use different date formats etc.

Generally speaking filters are very nice for encapsulating formatting logic / UI helper functions. More on creating filters here: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Filters are nice and fit many use cases but if you are simply after using any function in your template it is possible. Just define a function in a scope and you are ready to use it directly in your template:

{{doSomething(CreatedDate)}}

where doSomething needs to be defined on a scope (a current one or one of the parent scopes):

function MyCtrl($scope) {    $scope.doSomthing = function(argument){        //ui helper logic here    }    }