axel axel - 1 month ago 10
Javascript Question

How to apply a function to an angularjs expression inside a controller?

simple question, I would like to apply a function inside my controller scope to an expression.

This is my HTML inside my controller

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate}}</span></p>


This is my javascript

$scope.formatMysqlTimestampToHumanreadableDateTime = function(sDateTime){
sDateTime = sDateTime.toString();
var sHumanreadableDateTime = sDateTime.substring(8, 10) + "/" + sDateTime.substring(5, 7) + "/" + sDateTime.substring(0, 4);
sHumanreadableDateTime += " " + sDateTime.substring(11, 13) + ":" + sDateTime.substring(14, 16);
return sHumanreadableDateTime;
};


and what I was trying to do is to apply formatMysqlTimestampToHumanreadableDateTime to paginaDetail.pubdate like this

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{formatMysqlTimestampToHumanreadableDateTime(paginaDetail.pubdate)}}</span></p>


or this

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate|formatMysqlTimestampToHumanreadableDateTime}}</span></p>


but both ways are not correct.

The first method works but on the console i've this error


Error: [$interpolate:interr]
http://errors.angularjs.org/1.2.16/$interpolate/interr?p0=Tot%20%7B%7BformatMysqlTimestampToHumanreadableDateTime(paginaDetail.endpubdate)%7D%7D&p1=TypeError%3A%20sDateTime%20is%20undefined
t/<@http://mysite.local/js/libs/angular.min.js:6:443
g/r@http://mysite.local/js/libs/angular.min.js:78:354
Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:106:161
Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:109:285
f@http://mysite.local/js/libs/angular.min.js:71:234
F@http://mysite.local/js/libs/angular.min.js:75:408
ve/http://mysite.local/js/libs/angular.min.js:76:457

http://mysite.local/js/libs/angular.min.js Line 89


and the second one simply doesn't work.

Do you have any suggestions? Thanks a lot.

Answer

If I can offer an alternative option to controller based actions... this looks like a great scenario for a filter

The idea is to use filter the input while it's being put into the html like {{myDate|format}}.

The filter is defined like:

myApp.filter('format', function () {
   return function (input) {
      //your date parser here
   };
});

Or whatever else you wish to do with it. This way you can reuse it without having to put the function in every controller you wish to use it in.

Here's a fiddle you can expand on, to get you going.

edit Looking more closely at the error I think your actual problem is that .pubdate is not populated (TypeError: sDateTime is not defined). Try to put a breakpoint in the function or see what console says.