用angular JS和 bootstrap完成一个简单的购物车界面

初学angularJS，自己做一个简单的demo玩一下。

购物车界面：(1)能显示商品基本信息； (2)能对购买数量进行修改；

(3)能够删除不想购买的商品； (4)能够自动计算购买数量和总金额

1. pay.html 购物车界面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的购物车</title>
<link href="bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="angularJS/angular.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<style type="text/css">table input{ text-align:center; width:30%; }.div_emptyFont{ font-size:40px; color:#999; margin-top:100px; }
</style>
<body><div  ng-app="myApp" ng-controller="myController" class="container"><table class="table" ng-show="cart.length"><thead><tr><th>编号</th><th>商品名称</th><th>购买数量</th><th>单价</th><th>总价</th><th>操作</th></tr></thead><tbody><tr ng-repeat="item in cart"><td>{{item.id}}</td><td>{{item.name}}</td><td><button type="button" class="btn btn-primary" ng-click="reduceQuantity(item)">-</button><input type="text" value="" ng-model="item.quantity" /><button type="button" class="btn btn-primary" ng-click="addQuantity(item)">+</button></td><td>{{item.price}}</td><td>{{item.quantity*item.price}}</td><td><button type="button" class=" btn btn-danger" ng-click="remove(item.id)" >移除</button></td></tr><tr><td>购物总价</td><td>{{totalPrice()}}</td><td>购买总数量</td><td>{{totalQuantity()}}</td><td colspan="2"><button type="button" class="btn btn-danger" ng-click="cart={}">全部清空</button></td></tr></tbody></table><div ng-show="!cart.length" class="div_emptyFont" >此处空空如也。。。。。。</div></div>
</body>
</html>

2. index.js 数据获取和事件处理

var app = angular.module("myApp",[]);
app.controller("myController",function($scope){$scope.cart=[{   id:1001,name:'ipone4s',quantity:2,price:3000},{   id:1023,name:'小米note',quantity:5,price:3999},{   id:561,name:'特步跑鞋',quantity:2,price:700},{   id:66,name:'李宁羽毛球拍',quantity:2,price:562},{   id:4321,name:'ipone7s',quantity:2,price:5000},];/**购物总价**/$scope.totalPrice=function(){var total=0;angular.forEach($scope.cart,function(item){total+=item.quantity*item.price;});    return total;};/**计算购买总数量**/$scope.totalQuantity=function(){var total=0;angular.forEach($scope.cart,function(item){total+=parseInt(item.quantity);});   return total;};/**找一个元素的索引**/var findIndex=function(id){var index=-1;angular.forEach($scope.cart,function(item,key){if(item.id === id){index=key;}});return index;}/**移除商品**/$scope.remove=function(id){//alert(id);//**找出该id对应的索引var index=findIndex(id);alert(index);if(index !== -1){$scope.cart.splice(index,1);}}/**全部清空购物车**///即， 使cart变为空/**添加购买数量**/$scope.addQuantity=function(item){++item.quantity;}/**减少购买数量**/$scope.reduceQuantity=function(item){if( item.quantity > 1){--item.quantity;}else{var returnKey=confirm('是否要移除该商品！！！');if(returnKey){$scope.remove(item.id);}}}$scope.$watch('cart',function(newValue,oldValue){angular.forEach(newValue,function(item,key){if(item.quantity < 1){var returnKey=confirm('是否从购物车中移除？？');if(returnKey)$scope.remove(item.id);elseitem.quantity=oldValue[key].quantity;}});});});

3. 界面效果

这个较为简单，只是引用了angular JS做数据渲染以及事件操作，相比自己纯手写JS来处理要轻松得多。bootstrap用来处理界面布局和样式选择上。这个demo扔有很多改进的地方，我在这里主要就是记录一下我今天用angular JS如何渲染数据以及遇上的一点小问题。

（1）.我将 ng-app写在body元素里面了：<body ng-app>，这个单独用没问题，但是我放入我的web项目中，浏览器访问tomcat，打开该页面时浏览器出现警告

这就导致了数据无法渲染到界面，其实就是angular的控制器没有起作用。所以当我将 ng-app放在DIV元素里的时候，就正常显示了。

用angular JS和 bootstrap完成一个简单的购物车界面相关推荐

vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
Android（安卓）一个简单的聊天界面的实现（eclipse实现）
这几天刚刚学习一下安卓的编程,尝试制作了一个简单的聊天界面(还没有实现网络等后续功能)软件界面如图.(使用eclipse实现) 当输入一些内容后,聊天界面可以下拉显示更多的聊天信息,如下图首先对这个 ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
一对一直播源码，实现一个简单的登录界面
一对一直播源码,实现一个简单的登录界面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
一个简单的购物车加减按钮
一个简单的购物车加减按钮,自定义控件实现,非常简单,有兴趣的可以自己尝试一下 import android.content.Context; import android.util.Attribute ...
java qq ui界面_java swing 创建一个简单的QQ界面教程
记录自己用java swing做的第一个简易界面. LoginAction.java package com.QQUI0819; import javax.swing.*; import java.a ...
写一个简单的Java界面程序
写一个简单的Java界面程序有时候未免想写一些有界面的java小程序练练手,那么如何写一个比较好看的界面话程序呢?下面小编就带你一步一步来搭建这个小洋房. 实现界面化编程要用到的一个主要包impor ...
PyQt5制作一个简单的登录界面
最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录一.效果图二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图如下: 二.简 ...

用angular JS和 bootstrap完成一个简单的购物车界面

用angular JS和 bootstrap完成一个简单的购物车界面相关推荐

最新文章

热门文章