JSFiddle - React, Tailwind, and code Playground

by Jasper Krielaars

HTML

<div ng-app>
  
  <div ng-controller="DemoCtrl">
      <h4>calculated in view</h4>
      <table>
          <tr ng-repeat="order in orders">
              <td>{{order.id_order}}</td>
              <td>$ {{ (order.shipping | number) * (order.tax | number)/100 }} </td>
              <td class="muted">({{ order.shipping }} * {{order.tax}}%)</td>
          </tr>
      </table>
      
      <h4>calculated in controller</h4>
      <table ng-init="addTax()">
          <tr ng-repeat="order in orders">
              <td>{{order.id_order}}</td>
              <td>$ {{ order.shippingIncTax }} </td>
             
          </tr>
      </table>
  </div>
    
</div>

CSS

td{
    border: 1px solid black;
}
.muted{
color: #CCCCCC;
}

JavaScript

function DemoCtrl($scope){ 

	$scope.orders = [
    	{
        	"id_order":"206",
        	"shipping":"100.00",
        	"tax":"35.00"
    	},
    	{
        	"id_order":"205",
        	"shipping":"160.00",
        	"tax":"16.00"
    	},
    	{
            "id_order":"204",
        	"shipping":"100.00",
        	"tax":"16.00"
    	}
    ];
    
    // this function should/could be called after the orders are loaded from your API 
    $scope.addTax = function(){
        angular.forEach($scope.orders, function(order) {
            order.shippingIncTax = parseInt(order.shipping)*(parseInt(order.tax)/100);
        });
    };
}