zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    indexDB的用法
    append动态生成的元素,无法触发事件的原因及解决方案
    jquery中attr()和prop()的区别
    arguments.callee
    meter标签度量衡如何改变颜色
    Nginx入门
    linux中的权限管理
    python_面向对象
    ORM
    Flask入门
  • 原文地址:https://www.cnblogs.com/pengpenghappy/p/3802666.html
Copyright © 2011-2022 走看看