Javascript – function call inside Angular double curly braces

angularjsjavascriptkendo-ui

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?

Best Answer

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.

UPDATE: Check out AngularUI's new project to address this problem

For subsections it's as easy as leveraging strings in ng-include:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

Or you can create an object in case you have links to sub pages all over the place:

$scope.pages = { page1: 'section1/subpage1.htm', ... };

<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

Or you can even use $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;

<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

You can also put an ng-controller at the top-most level of each partial

AngularJS-Twig conflict with double curly braces

You can change the start and end interpolation tags using interpolateProvider service. One convenient place for this is at the module initialization time.

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

Best Answer

Related Solutions

Javascript – Complex nesting of partials and templates

UPDATE: Check out AngularUI's new project to address this problem

AngularJS-Twig conflict with double curly braces

Related Topic