使用Angular.js实现简单的购物车功能  更新时间:2016年11月21日 17:12:41   作者:骑着小猪来编程   在各大购物网站大家都可以简单购物车效果演示,下面通过本文给大家分享一段代码关于使用Angular.js实现简单的购物车功能,需要的朋友可以参考下 先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: 产品编号产品名称购买数量产品单价产品总价操作 {{x.id}} {{x.name}} – + {{x.price}} {{x.price * x.quantity}} 移除 总价:购买数量 {{numAll()}} 清空购物车 效果图展示如下: 以上所述是小编给大家介绍的使用Angular.js实现简单的购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章: 利用Angularjs和bootstrap实现购物车功能 Angularjs 制作购物车功能实例代码 Angular实现购物车计算示例代码 angular和BootStrap3实现购物车功能 AngularJS 购物车全选/取消全选功能的实现方法 angular.js实现购物车功能 angularjs实现简单的购物车功能 AngularJS 实现购物车全选反选功能 AngularJs 终极购物车(实例讲解) Angular动画实现的2种方式以及添加购物车动画实例代码 angularjs 购物车 相关文章 三种AngularJS中获取数据源的方式 这篇文章主要介绍了三种AngularJS中获取数据源的方式,需要的朋友可以参考下 2016-02-02 Angular2学习笔记之数据绑定的示例代码 本篇文章主要介绍了Angular2学习笔记之数据绑定的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 Angular.js中定时器循环的3种方法总结 这篇文章主要给大家总结了angular.js中定时器循环的3种方法,分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现,每种方法都给出了详细的示例艾玛供大家学习参考,需要的朋友们下面跟着小编一起来学习学习吧。 2017-04-04 AngularJs学习第八篇 过滤器filter创建 这篇文章主要介绍了AngularJs学习第八篇 过滤器filter创建的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 2016-06-06 AngularJS基于provider实现全局变量的读取和赋值方法 这篇文章主要介绍了AngularJS基于provider实现全局变量的读取和赋值方法,结合实例形式分析了AngularJS全局变量的声明、赋值、读取等相关使用技巧,需要的朋友可以参考下 2017-06-06 Angularjs 动态改变title标题(兼容ios) 这篇文章主要介绍了 Angularjs 动态改变title标题(兼容ios)的相关资料,需要的朋友可以参考下 2016-12-12 div实现自适应高度的textarea实现angular双向绑定 本文主要介绍了div实现自适应高度的textarea,实现angular双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 AngularJS包括详解及示例代码 本文主要介绍AngularJS包括的基础知识,这里整理了相关资料并附示例代码和实现效果图,有需要的小伙伴可以参考下 2016-08-08 深入理解Angular4订阅(Subscribe)与取消 这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 Angular-Touch库用法示例 这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下 2016-12-12 最新评论

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

<!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实现简单的购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 利用Angularjs和bootstrap实现购物车功能
  • Angularjs 制作购物车功能实例代码
  • Angular实现购物车计算示例代码
  • angular和BootStrap3实现购物车功能
  • AngularJS 购物车全选/取消全选功能的实现方法
  • angular.js实现购物车功能
  • angularjs实现简单的购物车功能
  • AngularJS 实现购物车全选反选功能
  • AngularJs 终极购物车(实例讲解)
  • Angular动画实现的2种方式以及添加购物车动画实例代码
张贴在3