Items with a Count

Display a list of items and add a count for each item and the ability to remove a count.

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ItemsCtrl as items_ctrl">
  <div class="row">
    <div class="col-sm-6">
      <h4>Available Items</h4>

      <table class="table">
        <tr ng-repeat="i in items_ctrl.items">
          <td>{{i.name}}</td>
          <td class="text-right">
            <button ng-click="items_ctrl.addItem(i)" class="btn btn-default btn-sm">+</button>
          </td>
        </tr>
      </table>
    </div>
    <div class="col-sm-6">
      <h4>My Items</h4>

      <table class="table">
        <tr ng-repeat="i in items_ctrl.my_items" ng-show="i.num > 0">
          <td>{{i.name}} ({{i.num}})</td>
          <td class="text-right">
            <button ng-click="items_ctrl.removeItem(i)" class="btn btn-default btn-sm">Remove 1</button>
          </td>
        </tr>
      </table>
    </div>
  </div>

CSS

body {
  padding: 20px;
}

JavaScript

(function() {

  'use strict';

  angular
    .module('app', [])
    .controller('ItemsCtrl', ItemsCtrl);

  function ItemsCtrl() {
    var vm = this;

    vm.items = [{
      name: 'Dogs',
      num: 0
    }, {
      name: 'Cats',
      num: 0
    }, {
      name: 'Hamsters',
      num: 0
    }];

    vm.my_items = angular.copy(vm.items);
    vm.addItem = addItem;
    vm.removeItem = removeItem;

    function addItem(item) {
      var idx = vm.items.indexOf(item);
      var num = vm.my_items[idx].num;
      vm.my_items[idx].num = num + 1;
    }

    function removeItem(my_item) {
      var num = my_item.num;
      if (num > 0) {
        var idx = vm.my_items.indexOf(my_item);
        vm.my_items[idx].num = num - 1;
      }
    }
  }

})();