<div ng-app> <div ng-controller="mainCtrl"> <h1>메뉴판</h1> <h2>메뉴 목록</h2> <table class="table"> <thead> <tr><th>메뉴</th><th>가격</th><th>갯수</th></tr> </thead> <tbody> <tr ng-repeat="menu in menuList"> <td>{{menu.itemName}}</td> <td>{{menu.itemPrice}}</td> <td><input type="number" ng-model="menu.itemCount" /></td> </tr> </tbody> <tfoot> <tr> <td colspan="2">구입가격</td> <td class="text-right">{{totalPrice}}</td> </tr> </tfoot> </table> <div class="text-right"> <button type="button" class="btn btn-default" ng-click="buy()">구매</button> </div> </div> </div>
var mainCtrl = function($scope){ var menuList = [ {itemId: 1, itemName: '샌드위치', itemPrice: 2000, itemCount: 0}, {itemId: 2, itemName: '아메리카노', itemPrice: 1000, itemCount: 0}, {itemId: 3, itemName: '카푸치노', itemPrice: 1500, itemCount: 0} ]; $scope.menuList = menuList; $scope.totalPrice = 0; $scope.buy = function(){ $scope.totalPrice = 0; angular.forEach($scope.menuList, function(menu, idx){ $scope.totalPrice = $scope.totalPrice + (menu.itemPrice * Number(menu.itemCount)); }); }; };