JSFiddle - React, Tailwind, and code Playground

angular total cart, $watch

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="MainCtrl" class="container ">
    <div ng-repeat="row in rows" class="row col-xs-4">
        <input type="number" class="form-control col-xs-2" ng-model="row.unit_price">
        <input type="number" class="form-control col-xs-2" ng-model="row.quantity"> 
        <strong> {{row.unit_price * row.quantity | currency:USD }}</strong>
        <small> {{ (row.unit_price * row.quantity *1.21) | currency:gbp}}</small>
    <br>
    </div>
    <div class="clearfix"></div>
    <div class="panel panel-default">
    <div class="panel-body">
      <span class="lead">Total of all rows: {{total | currency:usd}}</span>
    </div>
    </div>
   
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.rows = [{
        unit_price: 1,
        quantity: 0
    }, {
        unit_price: 2,
        quantity: 0
    }, {
        unit_price: 3,
        quantity: 0
    }];
    $scope.$watch('rows', function (e) {
    console.log(e)
        $scope.total = 0
        angular.forEach($scope.rows, function(row){
            $scope.total += row.unit_price * row.quantity
        })
    }, true)
});