forked from zhufengzhufeng/angular8
-
Notifications
You must be signed in to change notification settings - Fork 0
/
car.html
80 lines (80 loc) · 3.15 KB
/
car.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-controller="carCtrl">
<table class="table table-bordered">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectOn()">全选</td>
<td>商品</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="product in products">
<td><input type="checkbox" ng-model="product.selected" ng-click="selectOne()"></td>
<td>{{product.name}}</td>
<td>
<button ng-click="product.count=product.count-1" ng-disabled="product.count<=1">-</button>
<!--ng-disabled 如果为true的时候此按钮会被禁用掉-->
<input type="text" ng-model="product.count">
<button ng-click="product.count=product.count+1">+</button>
</td>
<td>{{product.price}}</td>
<td>{{product.price*product.count}}</td>
<!--将要删除的数据传递到方法中-->
<td><button class="btn btn-danger" ng-click="del(product)">删除</button></td>
</tr>
<tr>
<td colspan="6">总价 {{total()}}</td>
</tr>
</table>
<script src="node_modules/angular/angular.js"></script>
<script>
var app = angular.module('appModule',[]);
app.controller('carCtrl',function ($scope) {
$scope.products = [
{name:'迈向Angular 2',price:44,count:1,selected:true},
{name:'西部数据(WD)',price:399,count:1,selected:true},
{name:'幻响(i-mu)iPhone6s',price:30,count:1,selected:true},
{name:'【京东超市】清风(APP)',price:50,count:1,selected:true}
];
$scope.del = function (product) {
$scope.products = $scope.products.filter(function (item) {
return product!=item; //返回为true的 为false则被过滤掉了
});
};
//求总价,循环出每一项进行累加求和, 此方法,当页面上的数据更改时,angular会做脏值检查,更新需要更新的值
$scope.total = function () {
var sum = 0;
$scope.products.forEach(function (product) {
sum += product.price*product.count;
});
return sum;
}
//全选全不选
$scope.selectOn = function () {
//下面的按钮都根据我们的selectAll的值来写
$scope.products.forEach(function (product) {
product.selected = $scope.selectAll;
});
};
//下面的选择后要进行判断 如果有一个没选中则为没选中,如果都选中了则为true
function s() { //先执行一次对代码进行一次处理
var flag = true;
$scope.products.forEach(function (product) {
if(!product.selected)flag=false;
});
$scope.selectAll = flag;
}
s();
$scope.selectOne =s;
});
//选中多少个商品 删除选中商品 只算出选中的价格
</script>
</body>
</html>