BMI Calculation using AngularJS

BMI Calculation 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="bmiApp">
    <div class="row">
        <fieldset class="scheduler-border" data-ng-controller="bmiController">
            <legend class="scheduler-border">ABC</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>

                    <input type="text" ng-model="numberHtPoint  " valid-number class="form-control" placeholder="Enter height in mtrs or in feet" data-ng-disabled="!bmiHeightCalc" data-ng-change="txtHtChange()" />
                </div>
                <div class="form-group" data-ng-show="bmiHeightCalc=='htInch' || bmiHeightCalc=='htCms'">
                    <input...

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;
}

JavaScript

var app = angular.module('bmiApp', []);
app.controller('bmiController', function ($scope) {
    $scope.txtWtChange = function () {
        if ($scope.bmiWeightCalc == "wtKgs") {
            hideWt = false;
            $scope.resultWeight = $scope.numberWt;
        } else {
            hideWt = false;
            $scope.resultWeight = $scope.numberWt / 2.20462;
        }
    } //weight change function end

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

        } else if ($scope.bmiHeightCalc == "htFeet") {
            hideHt = false;
            $scope.resultHeight = ($scope.numberHt / 3.28084) + ($scope.numberHtPoint / 39.3701);

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

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

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

    $scope.calculateBMI = function () {
        $scope.bmi = ($scope.resultWeight) / (($scope.resultHeight) * ($scope.resultHeight));
    } //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...