<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
<title>AngularJs-模拟购物车</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{margin:50px;}
.tab{border-collapse: collapse;width: 100%;}
th,td{border:1px solid #ccc;padding: 5px; text-align: text;}
</style>
</head>
<body>
<table class="tab" ng-controller="shopController">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>金额</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr ng-repeat="data in cdatas">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td><input type="text" ng-model="data.price"/></td>
<td><input type="text" ng-model="data.num"/></td>
<td>{{data.price * data.num}}</td>
</tr>
<tfoot>
<tr>
<td colspan="10" style="text-align:right;padding: 20px;">
<input type="button" ng-click="totals()" value="计算总金额" />
<div>总计为：{{totals()}}元</div>
</td>
</tr>
</tfoot>
</thead>
</table>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("shopController",function($scope){
$scope.cdatas = [
{id:1,name:"苹果1",price:1,num:1,total:2},
{id:2,name:"苹果2",price:2,num:2,total:4},
{id:3,name:"苹果3",price:3,num:3,total:6},
{id:4,name:"苹果4",price:4,num:4,total:8},
{id:5,name:"苹果5",price:5,num:5,total:10}
];
$scope.totals = function(){
var total = 0;
for (var i = 0;i < $scope.cdatas.length; i++) {
total += $scope.cdatas[i].price * $scope.cdatas[i].num;
}
return total;
};
});
</script>
</body>
</html>