您的位置：首页 > 其它

简单购物车可加减

2017-12-21 09:12 330 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<center>

<table border="1px" cellspacing="1" cellpadding="1" width="500px">

<tr ng-repeat="x in good" align="center">

<td><input type="checkbox" ng-model="x.check"/></td>

<td>{{x.name}}</td>

<td>

<input type="button" value="-" ng-click="jian($index)"/>

{{x.count}}

<input type="button" value="+" ng-click="jia($index)"/>

</td>

<td>{{x.price}}</td>

<td ng-click="shanchu($index)">删除</td>

</tr>

</table>

<br /><br />
<input type="checkbox" ng-model="mqx" ng-click="qx()"/>全选
合计<span ng-bind="sum()">0</span>

</center>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.good=[
{"check":false,
"name":"你好啊我来拉别跑啊",
"count":1,
"price":650
},
{"check":false,
"name":"我爱你挣扎呢个十年护你",
"count":1,
"price":350
},
{"check":false,
"name":"我们是不可能的",
"count":1,
"price":150
}
];
//增加的代码
$scope.jia=function($index){
$scope.good[$index].count++;

}
//减少的代码
$scope.jian=function($index){
//大于1较减少否则删除
if($scope.good[$index].count>1){
$scope.good[$index].count--;
}else{
$scope.good.splice($index,1);

}
}

//删除的代码
$scope.shanchu=function($index){
$scope.good.splice($index,1);

}
//总数的代码
$scope.sum=function(){

var n=0;
for (var i=0;i<$scope.good.length;i++) {
if($scope.good[i].check){
n+=$scope.good[i].price*$scope.good[i].count;

}
}
return n;
}

//全选
$scope.qx=function(){
if($scope.mqx){

for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=true;

}
}else{

for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=false;
}

}
}

})

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航