Simple Shopping Cart By AngularJS

时间：2022-06-20 09:18:59
<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>

相关文章