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>
posted @ 2014-06-22 15:59  PengpengSong  阅读(278)  评论(0)  编辑  收藏  举报