<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../libs/angular.min.js"></script>
<style>
/*偶数行隔行变色*/
table tr:nth-child(even) {
background: #f89;
}
/*奇数行隔行变色*/
table tr:nth-child(odd) {
background: #ccc;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.allMoney = 0;
$scope.shops = [{
name: "鼠标",
num: 1,
price: 10.00,
}, {
name: "键盘",
num: 1,
price: 6.00,
}, {
name: "主机",
num: 1,
price: 30.00,
}];
//求小计的和
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
//删除的方法
$scope.del = function(na) {
if(window.confirm("确认删除" + na + "吗?")) {
for(index in $scope.shops) {
if(na == $scope.shops[index].name) {
$scope.shops.splice(index, 1);
if($scope.shops.length == 0) {
alert("购物车为空,去商场逛一逛吧!");
}
}
}
}
//删除时让总价也随着减少
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var xiao = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = $scope.allMoney-xiao;
}
}
//添加的和
$scope.add = function() {
$scope.shops.push({
name: $scope.newName,
num: $scope.newNum,
price: $scope.newPrice,
price1: $scope.newPrice_sum,
});
//求小计相加的和
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
}
});
</script>
</head>
<body ng-app="App" ng-controller="Demo">
<table border="1" align="center" width="450px">
<thead>
<tr>
<td>序号</td>
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="sh in shops">
<td>{{$index+1}}</td>
<td>{{sh.name}}</td>
<td>{{sh.num}}</td>
<td>{{sh.price | currency:"RMB¥"}}</td>
<td>{{sh.price * sh.num| currency:"RMB¥"}}</td>
<td>
<input type="button" value="删除" ng-click="del(sh.name)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!--价钱起前面加"RMB¥"-->
<td colspan="6">总价为:{{allMoney | currency:"RMB¥"}}</td>
</tr>
</tfoot>
</table>
<hr style="border-color: red;" />
<!--添加的布局-->
<form style="margin-left: 600px; margin-top: 60px;">
名称:<input type="text" ng-model="newName" /><br /> 数量:
<input type="text" ng-model="newNum" /><br /> 单价:
<input type="text" ng-model="newPrice" /><br />
<button ng-click="add()">添加</button>
<input type="reset" value="重置" />
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../libs/angular.min.js"></script>
<style>
/*偶数行隔行变色*/
table tr:nth-child(even) {
background: #f89;
}
/*奇数行隔行变色*/
table tr:nth-child(odd) {
background: #ccc;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.allMoney = 0;
$scope.shops = [{
name: "鼠标",
num: 1,
price: 10.00,
}, {
name: "键盘",
num: 1,
price: 6.00,
}, {
name: "主机",
num: 1,
price: 30.00,
}];
//求小计的和
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
//删除的方法
$scope.del = function(na) {
if(window.confirm("确认删除" + na + "吗?")) {
for(index in $scope.shops) {
if(na == $scope.shops[index].name) {
$scope.shops.splice(index, 1);
if($scope.shops.length == 0) {
alert("购物车为空,去商场逛一逛吧!");
}
}
}
}
//删除时让总价也随着减少
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var xiao = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = $scope.allMoney-xiao;
}
}
//添加的和
$scope.add = function() {
$scope.shops.push({
name: $scope.newName,
num: $scope.newNum,
price: $scope.newPrice,
price1: $scope.newPrice_sum,
});
//求小计相加的和
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
}
});
</script>
</head>
<body ng-app="App" ng-controller="Demo">
<table border="1" align="center" width="450px">
<thead>
<tr>
<td>序号</td>
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="sh in shops">
<td>{{$index+1}}</td>
<td>{{sh.name}}</td>
<td>{{sh.num}}</td>
<td>{{sh.price | currency:"RMB¥"}}</td>
<td>{{sh.price * sh.num| currency:"RMB¥"}}</td>
<td>
<input type="button" value="删除" ng-click="del(sh.name)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!--价钱起前面加"RMB¥"-->
<td colspan="6">总价为:{{allMoney | currency:"RMB¥"}}</td>
</tr>
</tfoot>
</table>
<hr style="border-color: red;" />
<!--添加的布局-->
<form style="margin-left: 600px; margin-top: 60px;">
名称:<input type="text" ng-model="newName" /><br /> 数量:
<input type="text" ng-model="newNum" /><br /> 单价:
<input type="text" ng-model="newPrice" /><br />
<button ng-click="add()">添加</button>
<input type="reset" value="重置" />
</form>
</body>
</html>