使用Angular.js实现简单的购物车功能


Posted in Javascript onNovember 21, 2016

先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<style type="text/css">
td,th{
width: 150px;
text-align: left;
}
table{
width: 800px;
}
.num{
width: 70px;
text-align: center;
}
tr td:last-child button {
background-color: red;
}
#foot button{
background-color: red;
}
</style>
</head>
<!--ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定
{{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据
-->
<body ng-app="myApp">
<div ng-controller="VC1">
<table border="" cellspacing="" cellpadding="">
<tr><th>产品编号</th><th>产品名称</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr>
<tr ng-repeat="x in Product" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button> </td>
<td >{{x.price}}</td>
<td>{{x.price * x.quantity}}</td>
<td><button ng-click="remove($index)">移除</button></td></tr>
</table>
<div id="foot"><span>总价:</span><span ng-bind="totalQuantity()"></span><span>购买数量</span>
<span >{{numAll()}}</span> <button ng-click="removeAll()">清空购物车</button> </div>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("VC1",function($scope){
$scope.Product = [{
id: 1000,
name: "iPhone8",
quantity: 1,
price: 8888
}, {
id: 1001,
name: "iPhone9",
quantity: 1,
price: 9888
}, {
id: 1002,
name: "iPhone 2s",
quantity: 1,
price: 3888
}, {
id: 1003,
name: "iPhone 7P+",
quantity: 1,
price: 10088
}];
//减少数量
$scope.reduce = function(index){
if( $scope.Product[index].quantity > 1){
$scope.Product[index].quantity--;
}else{
$scope.remove(index);
}
}
//添加数量函数
$scope.add = function(index){
$scope.Product[index].quantity++;
}
//所有商品总价函数
$scope.totalQuantity = function(){
var allprice = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
allprice += $scope.Product[i].quantity * $scope.Product[i].price;
}
return allprice;
}
//购买总数量函数
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//删除当前商品
$scope.remove = function(index){
if(confirm("确定要清空数据吗")){
$scope.Product.splice(index,1)
}
}
//清空购物车
$scope.removeAll = function(){
if(confirm("你确定套清空购物车所有商品吗?")){
$scope.Product = [];
}
}
//解决输入框输入负数时变为1
$scope.change = function(index){
if ( $scope.Product[index].quantity >= 1) {
}else{
$scope.Product[index].quantity = 1;
}
}
$scope.$watch('Product',function(oldvalue,newvalue){
console.log(oldvalue);
console.log(newvalue);
})
})
</script>
</html>

效果图展示如下:

使用Angular.js实现简单的购物车功能

以上所述是小编给大家介绍的使用Angular.js实现简单的购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
JavaScript实现星级评价效果
May 17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 #Javascript
JS实现图片上传预览功能
Nov 21 #Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 #Javascript
javascript入门之数组[新手必看]
Nov 21 #Javascript
jQuery UI插件实现百度提词器效果
Nov 21 #Javascript
javascript中Number的方法小结
Nov 21 #Javascript
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PDO::getAttribute讲解
2019/01/28 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
零件设计自荐信范文
2013/11/27 职场文书
建筑安全责任书范本
2014/07/24 职场文书