Skip to content

Instantly share code, notes, and snippets.

@ovrmrw
Last active Aug 29, 2015
Embed
What would you like to do?
Angular Sample - Calculating Amount with Quantity and Price
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Sample</title>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div>
<!--Japanese:数量-->
<label>Quantity:</label><br />
<input type="number" ng-model="quantity" />
</div>
<div>
<!--Japanese:単価-->
<label>Price:</label><br />
<input type="number" ng-model="price" />
</div>
<div>
<!--Japanese:金額-->
<label>Amount:</label><br />
<input type="number" ng-model="amount" />
</div>
</div>
<!--Description in English-->
<ul>
<li>If the quantity and the price fields are filled, the amount field will be calculated automatically.</li>
<li>If the price field isn't filled, you can fill the amount field by hand freely.</li>
</ul>
<!--Description in Japnaese (日本語解説)-->
<ul>
<li>数量と単価が入力された場合は、金額=数量*単価とする。</li>
<li>単価が入力されなかった場合は、金額は自動計算しない。(手動で入力する)</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="MyScripts/myScript.js"></script>
</body>
</html>
interface myScope extends ng.IScope {
quantity: number; // Japanese:数量
price: number; // Japanese:単価
amount: number; // Japanese:金額
}
module myModule {
angular.module("myApp", [])
.controller("myController", ['$scope', ($scope: myScope) => {
$scope.quantity = null;
$scope.price = null;
$scope.amount = null;
// EN:This is a ko.computed(KnockoutJS) like approach that I think.
// JP:Angularでko.computed(KnockoutJS)みたいなことをやってみました。
$scope.$watch(() => [$scope.quantity, $scope.price], // EN:Observing two variables./JP:数量と単価の変更を監視する。
(newVal: number[], oldVal: number[]) => {
var newQuantity: number = newVal[0],
newPrice: number = newVal[1],
oldQuantity: number = oldVal[0],
oldPrice: number = oldVal[1];
if (newQuantity && newPrice) { // EN:If newVals are calculable, the amount will be updated./JP:数量と単価が有効値なら金額を自動計算する。
$scope.amount = newQuantity * newPrice;
}
if (!newPrice && oldPrice) { // EN:If the price changed from calculable to not, the amount will be init./JP:単価が有効値から無効値に変化したら金額をリセットする。
$scope.amount = null;
}
});
}]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment