Last active
August 29, 2015 14:18
-
-
Save ovrmrw/2beacb055c11b0f78e48 to your computer and use it in GitHub Desktop.
Angular Sample - Calculating Amount with Quantity and Price
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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