JSFiddle - React, Tailwind, and code Playground

by rodhartzell

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<body ng-app="app">
    <div ng-controller="OrderCtrl">
      <input type="text" ng-model="item.name">
          <button type="button" ng-click="additem()">add</button>

      <ul>
          <li ng-repeat="orderitem in orderitems">
              <p>{{ orderitem.name }} | {{ orderitem.qty }}</p>
          </li>
      </ul>
  </div>
</body>

JavaScript

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

app.controller('OrderCtrl', function($scope) {

    $scope.orderitems = [{name: 'foo', id:1, qty:1}];
    $scope.additem = function() {
        var exists = false;
        var data = {
            id : $scope.orderitems.length + 1,
            name: $scope.item.name,
            qty: 1
        }
        angular.forEach($scope.orderitems, function (item) {
            if (item.name == data.name) {
                exists = true;
                item.qty++;
                return false;
            }
        });
        if(!exists){
            $scope.orderitems.push(data);
        }
        
    };
});