本文介绍了一个使用AngularJS实现的简单发票计算器示例。该示例展示了如何通过AngularJS控制器设置初始数量和单价，并通过双向数据绑定实时计算总价。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!doctype html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 60;
}
</script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
<!doctype html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 60;
}
</script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
扫一扫
860