Simple Shopping Cart By AngularJS
<body ng-controller='CartController'> <h1>Your Order</h1> <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)">Remove</button> </div> <script src="~/Scripts/angular.js"></script> <script> function CartController($scope) { $scope.items = [ { title: 'Paint pots', quantity: 8, price: 3.95 }, { title: 'Polka dots', quantity: 17, price: 12.95 }, { title: 'Pebbles', quantity: 5, price: 6.95 } ]; $scope.remove = function (index) { $scope.items.splice(index, 1); } } </script> </body>
Use module:
<body ng-controller='CartController'> <h1>Your Order</h1> <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)">Remove</button> </div> <script src="~/Scripts/angular.js"></script> <script> var myModule = angular.module('myApp', []); myModule.controller('CartController', function ($scope) { $scope.items = [ { title: 'Paint pots', quantity: 8, price: 3.95 }, { title: 'Polka dots', quantity: 17, price: 12.95 }, { title: 'Pebbles', quantity: 5, price: 6.95 } ]; $scope.remove = function (index) { $scope.items.splice(index, 1); } }); </script> </body>