Items List

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <div ng-controller="Controller1 as ctrl">
    <button ng-click="ctrl.addNewItem()" class="btn btn-default">
      Add Item
    </button>
    <div ng-repeat="item in ctrl.mealList">
      <input type="text" ng-model="item.name" placeholder="Name">
      <input type="text" ng-model="item.price" placeholder="Price">
      <input type="number" ng-model="item.quantity" placeholder="Quantity">
    </div>
    <button ng-click="ctrl.saveItems()" class="btn btn-primary">
      Save
    </button>
    <hr>
    <div ng-if="ctrl.items_saved">
      <h4>
      Here is your meal list:
      </h4>
      <ul>
        <li ng-repeat="item in ctrl.mealList">{{item.quantity}} {{item.name}} at ${{item.price}} each</li>
      </ul>
    </div>
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

JavaScript

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

function Controller1($scope) {
  var vm = this;

  vm.items_saved = false;
  vm.mealList = [{
    price: '2.99',
    name: 'Pizza'
  }, {
    price: '1.99',
    name: 'Chips'
  }, {
    price: '4.99',
    name: 'Beer'
  }];

  vm.addNewItem = addNewItem;
  vm.saveItems = saveItems;

  function addNewItem() {
    vm.mealList.push({});
  }

  function saveItems() {
    vm.items_saved = true;
  }
}