JSFiddle - React, Tailwind, and code Playground

by Michael Conroy

HTML

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-controller="MainCtrl">
<div ng-repeat="row in rows track by $index" ng-controller="RowCtrl">
        <input type="text" class="form-control" ng-model="row.unit_price">
        <input type="text" class="form-control" ng-model="row.quantity"> 
        <strong>&euro; {{total | number:2}} ex.</strong>
        <small>&euro; {{total*1.21 | number:2}} in.</small>
</div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('RowCtrl', function ($scope) {
    $scope.total = 0;
    $scope.$watchCollection('[row.unit_price, row.quantity]', function(newValues)         {
        $scope.total = parseInt(newValues[0]) * parseInt(newValues[1]);
    });
});

app.controller('MainCtrl', function ($scope) {
    $scope.rows = [
        { unit_price: 10, quantity: 0 },
        { unit_price: 12, quantity: 0 },
        { unit_price: 15, quantity: 0 },
    ];
});