Height to Cm conversions using AngularJS

Height to Cm conversions using AngularJS

by santosh_patnala

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container" data-ng-app="heightApp">
        <div class="row">
            <fieldset class="scheduler-border col-lg-6" ng-controller="heightController">
                <legend class="scheduler-border">GHI</legend>
                <form action="">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionHeight" value="htMeter" data-ng-model="bmiHeightCalc"
                            data-ng-change="rdoHtChange()">
                        Height in Meters
                    </label>
                    <label>
                        <input type="radio" name="optionHeight" value="htFeet" data-ng-model="bmiHeightCalc"
                            data-ng-change="rdoHtChange()">
                        Height in feet
                    </label>
                    <label>
                        <input type="radio" name="optionHeight" value="htInch" data-ng-model="bmiHeightCalc"
                            data-ng-change="rdoHtChange()">
                        Height in inches
                    </label>
                    <label>
                        <input type="radio" name="optionHeight" value="htCms" data-ng-model="bmiHeightCalc"
                            data-ng-change="rdoHtChange()">
                        Height in centimeters
                    </label>
                </div>
                <label for="txtHeight">
                    Height <span class="mandateField">*</span></label>
                <div class="input-group" data-ng-show="bmiHeightCalc=='htMeter' || bmiHeightCalc=='htFeet'">
                    <input type="text" ng-model="numberHt" valid-number class="form-control" placeholder="Enter height in mtrs or in feet"
                        data-ng-disabled="!bmiHeightCalc" data-ng-change="txtHtChange()" />
                    <span class="input-group-addon">.</span>
 ...

CSS

fieldset.scheduler-border
{
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

legend.scheduler-border
{
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    margin-bottom: 0;
    padding: 0 10px;
    border-bottom: none;
}

.radio label
{
    margin: 0 5px;
}
.mandateField
{
    color: #ff0000;
}
.errorBorder
{
    border: 1px solid #e47f7f;
    box-shadow: 0 1px 1px rgba(255, 0, 0, 0.075) inset;
}
.errorBorder:focus
{
    border-color: #e47f7f;
    box-shadow: 0 1px 1px rgba(255, 0, 0, 0.08) inset, 0 0 8px rgba(232, 102, 102, 0.6);
}
.noErrorBorder
{
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

JavaScript

var app = angular.module('heightApp', []);
        app.controller('heightController', function ($scope) {


            $scope.txtHtChange = function () {
                if ($scope.bmiHeightCalc == "htMeter") {
                    hideHt = false;
                    $scope.resultHeight = ($scope.numberHt * 100) + ($scope.numberHtPoint * 100);

                } else if ($scope.bmiHeightCalc == "htFeet") {
                    hideHt = false;
                    $scope.resultHeight = ($scope.numberHt * 30.48) + ($scope.numberHtPoint * 2.54);

                } else if ($scope.bmiHeightCalc == "htInch") {
                    hideHt = false;
                    $scope.resultHeight = $scope.numberHt * 2.54;

                } else if ($scope.bmiHeightCalc == "htCms") {
                    hideHt = false;
                    $scope.resultHeight = $scope.numberHt;
                }
            } //height change function end

            $scope.rdoHtChange = function () {
                $scope.numberHt = "";
                $scope.numberHtPoint = "";
                $scope.resultHeight = "";
            } //radio height change fn end.


            $scope.calculateBMI = function () {
                //$scope.height2Cms = ;
            } //calculate bmi end
        }); //controller end

        //this directive is used to enter only numeric values into text boxes.
        app.directive('validNumber', function () {
            return {
                require: '?ngModel',
                link: function (scope, element, attrs, ngModelCtrl) {
                    if (!ngModelCtrl) {
                        return;
                    }
                    ngModelCtrl.$parsers.push(function (val) {
                        if (angular.isUndefined(val)) {
                            var val = '';
                        }
                        var clean = val.replace(/[^0-9]/g, '');
                        var decimalCheck = clean.split('.');

                        if...