Simple proportion calc

by slav123

HTML

<link rel="stylesheet" href="http://cdn.sdevel.info/bootstrap/css/bootstrap.min.css">
<h2>Simple proportion calculator</h2>
<div class="container" ng-app>
    <div class="row">
<div class="span4">        
<div ng-controller="Controller">
<table class="table">
    <tbody>
    <tr>
        <td>original</td>
        <td><input type="number" class="input-mini" min="0" name="x" ng-model="prop.x"></td>
        <td>&times;</td>
        <td><input type="number" class="input-mini" name="y" min="0" ng-model="prop.y"></td>
    </tr>
    <tr>
        <td>match</td>
        <td><input type="number" class="input-mini" min="0" name="rx" ng-model="prop.rx" ng-change="change(1)"></td>
        <td>&times;</td>
        <td><input type="number" class="input-mini" min="0" name="ry" ng-model="prop.ry" ng-change="change(0)"></td>
    </tr>
    <tr>
        <td>proportion</td>
        <td>{{prop.x}} x {{prop.y}}</td>
        <td>is like</td>
        <td>{{prop.rx|number:2}} x {{prop.ry|number:2}}</td>
    </tr>
    </tbody>
    </table>
</div>
    </div>
    </div>

JavaScript

function Controller($scope) {

    $scope.change = function(what) {
        if (what == 1) {
            $scope.prop.ry = $scope.prop.rx * $scope.prop.y / $scope.prop.x;
        } else {
            $scope.prop.rx = $scope.prop.ry * $scope.prop.x / $scope.prop.y;
        }
    };
}