<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
th,td{
width: 80px;
height: 40px;
border: 1px solid #69717d;
}
table{
border-collapse: collapse;
margin-top: 6px;
}
.inputlen{
width: 50px;
height: 10px;
}
</style>
<script src="angular-1.5.5/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.items=[
{
done:false,
"name":"铅笔",
"price":2,
"count":1
},
{
done:false,
"name":"彩笔",
"price":4,
"count":2
},
{
done:false,
"name":"毛笔",
"price":6,
"count":3
}
]
$scope.qk=function () {
$scope.items.length=0;
}
$scope.jia=function (index) {
$scope.items[index].count++;
}
$scope.jian=function (index) {
$scope.items[index].count--;
if($scope.items[index].count<=0){
$scope.items[index].count=0;
}
}
$scope.del=function (index) {
if (confirm("确认删除吗?") == true) {
$scope.items.splice(index, 1);
}
}
$scope.checkall=function () {
if ($scope.check1 == true) {
for (var i = 0; i < $scope.items.length; i++) {
$scope.items[i].done = true;
}
}
else {
for (var i = 0; i < $scope.items.length; i++) {
$scope.items[i].done = false;
}
}
}
var n=0;
$scope.fx=function (index) {
if($scope.items[index].done==true){
n++;
}else{
n--;
}
if(n==$scope.items.length){
$scope.check1=true;
}else {
$scope.check1=false;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<button ng-click="qk()">清空购物车</button>
<table>
<tr>
<th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>
<th>商品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in items">
<th><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></th>
<th>{{item.name}}</th>
<th>{{item.price}}</th>
<th><span ng-click="jia($index)">+</span><input type="text" ng-model="item.count" class="inputlen"><span ng-click="jian($index)">-</span></th>
<th>{{item.price*item.count}}</th>
<th><button ng-click="del($index)">删除</button></th>
</tr>
</table>
</body>
</html>