首页 > 代码库 > 第一个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（购物车）