CODEWITHSUNDEEP
javascriptangularjs
Reacting
Reacting

Reputation: 6123

Angular, math function in interpolation / binding

I am working with Angular and I am trying to do this

<td>{{(obj.revenue.total / obj.clicks.total).toFixed(2)}}</td>

and in the table the result is something like this

**EPC** 0.60 NaN // returns this, why ?

I prepared a JSFiddle where you will see this 

<table>
  <tr>
    <th ng-repeat='header in headers'>{{header}}</th>
  </tr>
  <tr ng-repeat='obj in data'>
    <td></td>
    <td>{{obj.clicks.total.toFixed(2)}}</td>
    <td>{{obj.landing_pages.total_clicks.toFixed(2)}}</td>
    <td>{{obj.landing_pages.click_through_rate.toFixed(2)}}</td>
    <td>{{obj.conversions.total.toFixed(2)}}</td>
    <td>{{(obj.conversions.total / obj.landing_pages.total_clicks)}}</td>
    <td>{{obj.conversions.amount.toFixed(2)}}</td>
    <td>{{obj.cost.total.toFixed(2)}}</td>
    <td>{{(ob.conversions.amount - obj.cost.total).toFixed(2)}}</td>
    <td>{{obj.net.roi.toFixed(2)}}</td>
    <td>{{obj.cost.cpc}}</td>
    <td>{{(obj.revenue.total / obj.clicks.total).toFixed(2)}}</td>
    <td>{{obj.cost.ecpc.toFixed(2)}}</td>
  </tr>
</table>

and the controller

.controller('PeopleCtrl', function($scope) {
  $scope.headers = [
    'Traffic Source',
    'Clicks',
    'LP Clicks',
    'LP CTR',
    'Conv',
    'CVR',
    'Rev',
    'Spend',
    'Profit',
    'ROI',
    'CPC',
    'EPC',
    'EPA'
  ];

  $scope.data = [];

  $scope.LoadMyJson = function() {
    angular.forEach(myJson, function(items) {
      $scope.data.push(items)
    })        
  };
  $scope.LoadMyJson();

})

http://jsfiddle.net/x5hfwdfs/

see the tds CVR, Profit and EPC, are the ones where I need to calculate.

Do you guys have an idea of the issue ?

Upvotes: 1

Views: 1766

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

You can use the fractionSize filter:

<td>{{obj.clicks.total | fractionSize: 2}}</td>

You can see the example here:

https://docs.angularjs.org/api/ng/filter/number

Upvotes: 1

Related Questions