Ox Jinja Angular example

by dumptyd

HTML

<div ng-app="oxApp" ng-controller="oxCtrl">
		<h3>Buy some stuff</h3>
		<ul class="products">
			<li>
				<p>Apple
          <button ng-click="add('Apple')">Add</button>
          <span ng-bind="listOfItems['Apple'].quantity">0</span>
          <button ng-click="remove('Apple')">Remove</button>
        </p>
			</li>
			<li>
				<p>Banana 
          <button ng-click="add('Banana')">Add</button>
          <span ng-bind="listOfItems['Banana'].quantity">0</span>
          <button ng-click="remove('Banana')">Remove</button>
        </p>
			</li>
			<li>
				<p>Chikoo 
          <button ng-click="add('Chikoo')">Add</button>
          <span ng-bind="listOfItems['Chikoo'].quantity">0</span>
          <button ng-click="remove('Chikoo')">Remove</button>
        </p>
			</li>
		</ul>
    <hr>
    <h3>Cart</h3>
    <ul> 
      <!-- render it with ng since it's client side  -->
      <li ng-repeat="i in cartItems">
        {{ i.name }} Rs. {{ i.cost }}
      </li>
    </ul>
	</div>

JavaScript

// initialize app
var app = angular.module('oxApp', []);

app.controller('oxCtrl', function($scope){
	// let's pretend this comes from backend (which is what I do in my flask app)
  $scope.listOfItems = {
  	'Apple': {
    	quantity: 4
    },
    'Banana': {
    	quantity: 5
    },
    'Chikoo': {
    	quantity: 7
    }
  };
  $scope.add = function(key) {
  	$scope.listOfItems[key].quantity++;
  };
  $scope.remove = function(key) {
  	if(!$scope.listOfItems[key].quantity) return;
  	$scope.listOfItems[key].quantity--;
  };
});