ovrmrw/index.html

## index.html
<!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>

## myScript.ts
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;
                }
            });
    }]);
}
	<!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;
	}
	});
	}]);
	}