摘要:ng-repeat in table
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
Product Name:<input type="text" ng-model="PName"><br>
Product Price:<input type="number" ng-model="Price"><br>
Product quantity:<input type="number" ng-model="Qty"><br>
<br>
Purchase Product: {{PName||'N/A'}}
<br>
Total price: {{Price* Qty||0 | currency:'NT$ '}}
<br>
Total price: NT$ {{subtotal()||0 | number:0}}
<br> <br>
<button>Add to Shopping Car</button>
<br>
<pre>{{carts|json}}</pre>
<br>
<table class="table">
<tr>
<th>#</th>
<th>商品名稱</th>
<th>商品價格</th>
<th>購買數量</th>
<th>小計</th>
</tr>
<tr ng-repeat="car in carts">
<td></td>
<td>{{car.PName}}</td>
<td>{{car.Price}}</td>
<td>{{car.Qty}}</td>
<td>{{car.Price * car.Qty}}</td>
</tr>
</table>
</body>
</html>
JS
=====================================================
function MainCtrl($scope)
{
$scope.Price = 1;
$scope.Qty = 5;
$scope.PName = "T-shirt";
$scope.subtotal = function(){
var result = $scope.Price * $scope.Qty;
if($scope.Qty > 9) result *= 0.9;
return result;
};
$scope.carts = [];
$scope.carts.push({
PName: 'T-Shirt',
Price: 199,
Qty: 3
});
$scope.carts.push({
PName: 'Shoes',
Price: 1800,
Qty: 2
});
$scope.carts.push({
PName: 'Eye glasses',
Price: 1000,
Qty: 5
});
}