function call inside Angular double curly braces

问题:

This is my code bit of a heat-map in Kendo UI.

<div ng-repeat="h in row.hours" ng-style="h.styleStr" 
    data-value="{{params.compare ? h.percentChange : h.current[unit]}}" 
    data-time="{{$index}}">
        {{params.compare ? h.percentChange : h.current[unit]}}
</div>

Its works perfectly fine. what the h.current[unit] inside the div, does is, it displays the value (in decimal notation). Like this..
However I need to display the decimal values as integers. Like this... And I have a intFormat function that does just that. For eg: intFormat(79.952) will return 80. So i'm trying to format the numbers inside the heatmap using the intFormat function. How to achieve this? I don't know if this is legal but I tried {{params.compare ? h.percentChange : intFormat(h.current[unit])}}, but its not working. I'm using Angularjs 1X and KendoUI. Can I use function inside the double curly brace?

回答1:

Sure you can:

create a function like this

$scope.getDisplayValue = function(currentValue)
{
   return intFormat(currentValue);
}

And then reference it like this in the html:

{{getDisplayValue(h.percentChange)}}

Please let me know if you have any questions.

回答2:

You can try using parseInt(10.5555), built in JavaScript convertor in your AngularJS Expression like this: {{parseInt(10.5555)}}.

Hope this helps. Thanks.

回答3:

I was able to fix this by attaching a filter..like this...
{{params.compare ? h.percentChange : h.current[unit]|numFmt}}