JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app='MyModule' ng-controller="MyController">
    <div checkout items='items'></div>
    <button type='button' ng-click='updateCount(+1)'>Increment thing 1 count</button>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
    $scope.items = [
        { title: 'thing1', price: 2.50, quantity: 1 },
        { title: 'thing2', price: 4.00, quantity: 2 }
    ];
    
    $scope.updateCount = function(num){
        $scope.items[0].quantity += num;
    };
})

.directive('checkout',[function() {
    return {
        restrict: 'A',
        $scope: {
            items: '=',
            tot: 0,
        },
        template: '<div data-ng-repeat="item in items">' +
                '<div class="col-md-2 text-left item-quantity">{{item.quantity}}</div>'+
                '<div class="col-md-4 text-left item-title">{{item.title}}</div>'+
                '<div class="col-md-4 text-right item-subtot">{{item.price * item.quantity}}</div>'+
                '</div>' +
                '<div class="text-right">Tot: {{tot}}</div>',
        link: function(scope, element, attrs, ngModel){
            scope.$watchCollection('items', function(){
                scope.tot = _.reduce( scope.items, function(sum, item) {
                    return sum + (item.price * item.quantity);
                },0);
            });
		}
    };
}]);