AngularJS实现购物车(一)

来源：互联网发布：向量化编程编辑：程序博客网时间：2024/06/02 05:33

案例：实现购物车简单的功能

要求：技术要求（html + css + AngularJS）

1.完成下图页面布局（代码、效果无误）。

2.自拟商品数据，通过ng-repeat进行商品遍历及信息展示（代码、效果无误）。

3.每一行数据后面都有一个删除按钮，点击删除按钮时该条数据信息被删除。

4.所有的商品信息都被删除后，商品列表消失。并提示用户购物车为空。

5.利用AngularJS的过滤器将价格展示为：”RMB￥“。

6.利用AngularJS能够显示商品总金额。

源码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>AngularJS实现购物车</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.t {width: 800px;line-height: 30px;}#dd {margin-left: 700px;margin-top: 20px;}</style></head><body ng-app="myApp" ng-controller="myCtrl"><h3>我的购物车</h3><table border="1px" cellspacing="0px" cellpadding="0px" class="t"><tr><td align="center">商品名</td><td align="center">数量</td><td align="center">单价</td><td align="center"  colspan="2">小计</td></tr><tr ng-repeat="good in goods"><td align="center">{{good.name}}</td><td align="center">{{good.count}}</td><td align="center">{{good.price|currency:"RMB￥"}}</td><td align="center">{{good.count*good.price|currency:"RMB￥"}}</td><td align="center"><input type="button" value="添加" ng-click="add($index)" />  <input type="button" value="删除" ng-click="dele($index)" /></td></tr></table><div class="sum" id="dd">总金额:{{sum}}</div><script type="text/javascript">//创建一个模型var mo = angular.module("myApp", []);//控制器mo.controller("myCtrl", function($scope) {//定义一个数组$scope.goods = [{"name": "鼠标","count": "1","price": "15"}, {"name": "键盘","count": "3","price": "40"}, {"name": "耳机","count": "1","price": "100"}];//显示总金额var sum1 = 0;for (var i = 0; i < $scope.goods.length; i++) {sum1 += $scope.goods[i].count * $scope.goods[i].price;}//赋值给总金额$scope.sum = sum1;//删除$scope.dele = function($index) {//alert("000");$scope.goods.splice($index, 1);//删除完毕,将总金额再计算一遍var sum1 = 0;for (var i = 0; i < $scope.goods.length; i++) {sum1 += $scope.goods[i].count * $scope.goods[i].price;}//赋值给总金额$scope.sum = sum1;//提示if ($scope.goods.length == 0) {alert("购物车已空");}}//添加$scope.add = function($index) {$scope.goods[$index].count++;var sum1 = 0;for (var i = 0; i < $scope.goods.length; i++) {sum1 += $scope.goods[i].count * $scope.goods[i].price;}//赋值给总金额$scope.sum = sum1;}});</script></body></html>

阅读全文

0 0