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: '='
        },
        template: '<div data-ng-repeat="item in items">' +
            '<span>{{item.title}}</span>'+
            '<span>, price {{item.price}}</span>'+
            '<span>, quantity {{item.quantity}}</span>'+
            '<span>, item total {{item.price * item.quantity}}</span>'+
        '</div>' +
        '<div>Total: {{tot}}</div>',
        link: function(scope, element, attrs, ngModel){
            scope.$watch('items', function(){
                scope.tot = _.reduce( scope.items, function(sum, item) {
                    return sum + (item.price * item.quantity);
                },0);
            }, true);
		}
    };
});