Showing posts with label kilometers to miles converter in angularjs. Show all posts
Showing posts with label kilometers to miles converter in angularjs. Show all posts

Sunday, March 13, 2016

Kilometers To Miles Converter in AngularJS

A very simple program that I wrote using AngularJS that will ask the user to give the distance in kilometers and then it will convert it into miles equivalent. The code is very simple and easy to understand for anyone interested in AngularJS programming.

If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.



Sample Program Output

Program Listing

<html>
<head> 
<title> Kilometers To Miles Converter in AngularJS </title>
</head>
<script type="text/javascript" src="angular.js"></script>
<script>
var app = angular.module('myApp', []);

app.filter('singleDecimal', function ($filter) {
    return function (input) {
        if (isNaN(input)) return input;
        return Math.round(input * 10) / 10;
    };
});

app.filter('setDecimal', function ($filter) {
    return function (input, places) {
        if (isNaN(input)) return input;
         var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
        return Math.round(input * factor) / factor;
    };
});

app.controller('Ctrl', function ($scope) {
    $scope.val = 1.56;
});
</script>
<style>
p {
   color:blue;
   font-family: "arial";
   font-style: bold;
   font-size: 18px;
  }
  
h3{
   color:red;
   font-family: "arial";
   font-style: bold;
   font-size: 20px;
  }
  
 input[type='text'] 
   { 
   color:blue;
   font-family: "arial";
   font-size: 18px;
   font-style: bold;
   }
 </style>
 <body bgcolor="yellow">
<br><br>
<h3>Kilometers To Miles Converter in AngularJS</h3>
<div ng-app="myApp">
    <p>How many kilometers :
        <input type="text" ng-model="kilometers" maxlength="5" size="3"/>
    </p><br>
    <p>The distance in kilometers is {{kilometers}} km its equivalent in miles is {{ kilometers * 0.621371192 | setDecimal:2 }} mi.</p>
</div>.
</body>
</html>