last Month

来源:互联网 发布:js排序算法 编辑:程序博客网 时间:2024/04/30 23:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月考模拟3</title>
<script src="js/angular.min.js"></script>
<script>

var myapp = angular.module("myapp", []);
myapp.controller("kongzhiqi", ["$scope", function($scope) {
$scope.users=[{state:false,name:"qq",price:"12.9",number:2},
{state:false,name:"wx",price:"23.9",number:1},
{state:false,name:"2wx",price:"99.9",number:1}
];

//数量的加减
$scope.jia=function(index,number){
$scope.users[index].number=$scope.users[index].number+number;
if($scope.users[index].number == 0){
$scope.users.splice(index,1);
}
}

    //删除
$scope.shanchu=function(index){
$scope.users.splice(index,1);
}


$scope.del=function(){
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state){
$scope.users.splice(i,1);
i--;  //让下个值从删除的索引开始
}
}
}
//全选的操作
$scope.ckAll=function(){
for(var i in $scope.users){
$scope.users[i].state=$scope.ckall;
}
}

$scope.counts = function() {
var con = 0;
for(var i in $scope.users) {
con += $scope.users[i].price * $scope.users[i].number;
}
return con;
}

}])

</script>
</head>
<body ng-app="myapp" ng-controller="kongzhiqi">
<h3>我的购物车</h3>
<hr/>
<br><br/><button style="margin-left: 300px;" ng-click="del()">清空购物车</button>
<table border="1px soild">
<tr>
<td>
<td><input type="checkbox" ng-model="ckall"  ng-click="ckAll()" /></td>
</td>
<td>商品名</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in users">
<td>
<td><input type="checkbox"  ng-model="u.state" /></td>
</td>
<td>{{u.name}}</td>
<td>{{u.price|currency:"¥"}}</td>
<td>
<button ng-click="jia($index,-1)">-</button>
<input ng-model="u.number"/>
<button ng-click="jia($index,+1)">+</button>
</td>
<td>{{u.number*u.price|currency:"¥"}}</td>
<td>
<button style="background: blue;" ng-click="shanchu($index)">删除</button>
</td>
</tr><br>
<tr>
<td colspan="6">
总价:{{counts()}}
</td>
</tr>
</table>
</body>
</html>
原创粉丝点击