首页 > 代码库 > 第一个AngularJS Demo(购物车)

第一个AngularJS Demo(购物车)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="http://www.mamicode.com/js/angular.js"></script>
  <title>Cart</title>
</head>
<body ng-app="CartApp">
  <h1>Your Cart</h1>
  <div ng-controller="CartController">
    <div ng-repeat="item in items">
      <p>物品:<span>{{item.title}}</span></p>
      <p>数量:<button ng-click="reduce($index)">-</button>
      <input style="width:30px;" ng-model=‘item.quantity‘ />
      <button ng-click="add($index)">+</button>
      <button ng-click="remove($index)">删除商品</button></p>
      <p>单价:{{item.price | currency}}</p>
      <p>总价:<span>{{item.price * item.quantity | currency}}</span></p>
    </div>
  </div>
  <script type="text/javascript">
    angular.module(‘CartApp‘, []).controller(‘CartController‘, function ($scope) {
      $scope.items = [
        { title: ‘one‘, quantity: 8, price: 3.95 },
        { title: ‘two‘, quantity: 9, price: 12.95 },
        { title: ‘three‘, quantity: 10, price: 15.99 }
      ];
      $scope.remove = function (index) {
        $scope.items.splice(index, 1);
      }
      $scope.add = function (index) {
        $scope.items[index].quantity++;
      }
      $scope.reduce = function (index) {
        if ($scope.items[index].quantity < 1) {
          $scope.items[index].quantity = 0;
        }
        else {
          $scope.items[index].quantity--;
        }
      }
    });
  </script>
</body>
</html>

第一个AngularJS Demo(购物车)