A simple Payroll System that I have create using AngularJS as my JavaScript framework the code is very simple and easy to understand. I just learning how to program in AngularJS and I find it easy and very interesting to explore and learn.
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> Payroll Program in AngularJS </title>
</head>
<style>
p,h3 {
color:blue;
display: inline-block;
float: left;
clear: left;
width: 380px;
text-align: right;
font-family: "arial";
font-style: bold;
size: 16;
};
input {
display: inline-block;
float: left;
}
</style>
<script type="text/javascript" src="angular.js"></script>
<body bgcolor="yellow">
<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>
<br><br>
<h3>Payroll System in AngularJS</h3>
<div ng-app="myApp">
<p>Employee's Name :
<input type="text" ng-model="emp" placeholder="employee's name" size="20"/>
</p>
<p>Number of Days Work :
<input type="text" ng-model="days" placeholder="no. days works" size="15"/>
</p>
<p>Rate Per Day :
<input type="text" ng-model="rate" placeholder="rate per day" size="15"/>
</p>
<br>
<p> Employee's Name is {{emp}}. </p><br>
<p> The Number of Days Worked is {{days}}.</p><br>
<p> The Rate Per Day is ${{rate | setDecimal:2 }}. </p><br><br>
<p>The salary of {{emp}} is $ {{ days * rate | setDecimal:1 }}</p>
</div>
</html>
No comments:
Post a Comment