Introduction to Operators and Operands
Introduction to Operators and Operands
Fundamentals of Operators in AngularJS
Introduction
As you may be aware already, in the {{}} placeholder, you can put constant values. Here are examples:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
<div ng-app>
<p>Employee #: {{394859}}</p>
<p>First Name: {{"Daniel"}}</p>
<p>Last Name: {{"Barker"}}</p>
<p>Hourly Salary: ${{22.84}}</p>
</div>
Because AngularJS is based on the JavaScript language, the library supports all of the classic arithmetic and bitwise operators of JavaScript.
The Addition Operation
In JavaScript and AngularJS, the addition is performed using the + operator. The operator can be used on numbers or strings. In a {{}} placeholder, to add two constant numbers, separate them with the + operator. You can also apply this operator between two constant strings. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
<div ng-app>
<p>Employee #: {{394859}}</p>
<p>Full Name: {{"Daniel" + " " + "Barker"}}</p>
<p>Hourly Salary: {{22.84}}</p>
</div>
You can also first declare variables and then apply the operator on them in a {{}} placeholder. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
<div ng-app ng-init="firstName='Christine'; lastName='Schwartz'; empty=' '">
<p>Employee #: {{394859}}</p>
<p>Full Name: {{firstName + empty + lastName}}</p>
<p>Hourly Salary: {{22.84}}</p>
</div>
The Subtraction
To subtract one number from another, use the - operator.
The Multiplication
To multiply one number to another, use the * operator. You can apply it to two constants in a {{}} placeholde. Here is an example:
. . .
<h2>Exercise</h2>
<div ng-app>
<p>${{22}} an hour is equivalent to ${{22 * 40}} a week</p>
</div>
. . .
Remember that you can also declare one or more variables in a {{}} placeholder. If you had declared variables in {{}} placeholders, in another {{}} placeholder, you can access those variables by name and involve them in an expression. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<style>
.whole-page {
margin: auto;
width: 400px;
}
</style>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<div class="whole-page">
<h1>Exercise</h1>
<div ng-app>
<table>
<tr>
<td>Unit Price:</td>
<td>{{price=144.95}}</td>
</tr>
<tr>
<td>Quantity:</td>
<td>{{quantity = 5}}</td>
</tr>
<tr>
<td>Total Price:</td>
<td>{{price * quantity}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
In a {{}} placeholder, you can declare more than one variable. In the same {{}} placeholder, you can create an expression that involves those local variables. Here is an example:
. . .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<h2>Exercise</h2>
<div>
<p>{{price=144.95; quantity = 3; price * quantity;}}</p>
</div>
. . .
The Division
To divide two numbers, separate them with the / operator. You would then get a result. Here is an example:
. . .
<h2>Exercise</h2>
<div ng-app>
<p>${{22}} an hour is equivalent to ${{22 * 40}} a week</p>
<p>{{84}} grand a year is the same as {{84000 / 12}} a month</p>
</div>
. . .
Of course, you can perform another operation on that result, such as dividing it by another number. If you are using a {{}} placeholder, you can directly add one or more divisions. Here is an example:
. . .
<h2>Exercise</h2>
<div ng-app>
<p>${{22}} an hour is equivalent to ${{22 * 40}} a week</p>
<p>{{84}} grand a year is the same as {{84000 / 12}} a month or {{84000 / 12 / 160}} an hour</p>
</div>
. . .
Using Variables
We know that you can use the ng-init directive to declare one or more variables (and initialize them). After declaring a variable in the ng-init directive, you can create a tag such as a text box and use the same variable name as the ng-model name of the control. Here is an example:
<div ng-app ng-init="meterReadingStart=0.00; meterReadingEnd=0.00;"> <p>Meter Reading Start: <input type="text" name="MeterReadingStart" ng-model="meterReadingStart" /> Gallons</td> <p>Meter Reading End: <input type="text" name="MeterReadingEnd" ng-model="meterReadingEnd" /> Gallons</td>
You can then involve the name in an expression of a {{}} placeholder. Here are examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Water Distribution Company</title>
<script src="angular.min.js"></script>
<style>
.container {
margin: auto;
width: 400px;
}
.strong { font-weight: bold; }
.long { width: 325px; }
.centered { text-align: center; }
</style>
</head>
<body>
<div class="container">
<h1 class="centered">Water Distribution Company</h1>
<h2 class="centered">Bill Preparation</h2>
</div>
<div class="container" ng-app ng-init="meterReadingStart=0.00; meterReadingEnd=0.00;">
<form name="BillPreparation" method="post">
<table style="width: 550px">
<tr>
<td class="long strong">Meter Reading Start:</td>
<td><input type="text" name="MeterReadingStart" ng-model="meterReadingStart" /> Gallons</td>
</tr>
<tr>
<td class="strong">Meter Reading End:</td>
<td><input type="text" name="MeterReadingEnd" ng-model="meterReadingEnd" /> Gallons</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td class="strong">Water and Sewer Usage:</td>
<td>{{meterReadingEnd - meterReadingStart}} Gallons</td>
</tr>
<tr>
<td class="strong">Water Use Charges => 4.18 per 1,000 Gallons:</td>
<td>{{(meterReadingEnd - meterReadingStart) * 4.18 / 1000}}</td>
</tr>
<tr>
<td style="font-weight: bold">Sewer Use Charges => 5.85 per 1,000 Gallons:</td>
<td>{{(meterReadingEnd - meterReadingStart) * 5.85 / 1000}}</td>
</tr>
<tr>
<td class="strong">Distribution Charges:</td>
<td>{{(((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.14286}}</td>
</tr>
<tr>
<td class="strong">Environment Charges:</td>
<td>{{(((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.057792}}</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td style="font-weight: bold">Total Charges:</td>
<td>{{((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000) + ((((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.14286) + ((((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.057792)}}</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Operations Based on Type
As you are surely aware, not all operators can be applied to all types. Therefore, you should always be aware of the types of values you are dealing with. For example, as is the case for both C# and JavaScript, when the addition is used on two strings, the result is the first string followed by the second string. The logic is the same on three strings. Here is an example:
. . .
<h2>Exercise</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" ng-model="firstName" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" ng-model="lastName" /></td>
</tr>
</table>
<p>{{firstName + ' ' + lastName}}</p>
</div>
. . .
Of course, you can also perform the addition on numbers. In this case, you should create the INPUT controls of TYPE="NUMBER". Here is an example:
. . .
<h2>Exercise</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app>
<p><input type="number" ng-model="number" /> +
<input type="number" ng-model="operand" /> = {{ number + operand }}</p>
</div>
. . .
Introduction to AngularJS Filters
Introduction
In AngularJS, a filter is a technique to (format a value) to specify how it would be presented to the user. AngularJS provides various options to support the different data types.
The primary formula to create a filter is:
value-or-expression |filter
Formatting a Floating-Point Number
As you may remember, a floating-point number is one made by two sections separated by the decimal separator. To let you specify how a floating-point number should appear to the user, AngularJS provides the following formula:
numeric-value|number:precision
Start by specifying the number you want to use. It is followed by the |number: expression. To make the expression easier to read, you should include space on both sides of each element, as in | number : . This expression is followed by the number of digits to display after the decimal separator. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.whole-page {
margin: auto;
width: 400px;
}
</style>
<script src="Scripts/angular.min.js"></script>
<title>Exercise</title>
</head>
<body ng-app>
<div class="whole-page">
<h1>Exercise</h1>
<div>
<table>
<tr>
<td>Unit Price:</td>
<td>{{price=144.95}}</td>
</tr>
<tr>
<td>Quantity:</td>
<td>{{quantity = 3}}</td>
</tr>
<tr>
<td>Total Price:</td>
<td>{{price * quantity | number : 2}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Of course, the format can also be applied to long expressions. Here are examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Water Distribution Company</title>
<script src="angular.min.js"></script>
<style>
.container {
margin: auto;
width: 400px;
}
.strong { font-weight: bold; }
.long { width: 325px; }
.centered { text-align: center; }
</style>
</head>
<body>
<div class="container">
<h1 class="centered">Water Distribution Company</h1>
<h2 class="centered">Bill Preparation</h2>
</div>
<div class="container" ng-app ng-init="meterReadingStart=0.00; meterReadingEnd=0.00;">
<form name="BillPreparation" method="post">
<table style="width: 550px">
<tr>
<td class="long strong">Meter Reading Start:</td>
<td><input type="text" name="MeterReadingStart" ng-model="meterReadingStart" /> Gallons</td>
</tr>
<tr>
<td class="strong">Meter Reading End:</td>
<td><input type="text" name="MeterReadingEnd" ng-model="meterReadingEnd" /> Gallons</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td class="strong">Water and Sewer Usage:</td>
<td>{{meterReadingEnd - meterReadingStart}} Gallons</td>
</tr>
<tr>
<td class="strong">Water Use Charges => 4.18 per 1,000 Gallons:</td>
<td>{{(meterReadingEnd - meterReadingStart) * 4.18 / 1000 | number : 2}}</td>
</tr>
<tr>
<td style="font-weight: bold">Sewer Use Charges => 5.85 per 1,000 Gallons:</td>
<td>{{(meterReadingEnd - meterReadingStart) * 5.85 / 1000 | number : 2}}</td>
</tr>
<tr>
<td class="strong">Distribution Charges:</td>
<td>{{(((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.14286 | number : 2}}</td>
</tr>
<tr>
<td class="strong">Environment Charges:</td>
<td>{{(((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.057792 | number : 2}}</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td style="font-weight: bold">Total Charges:</td>
<td>{{((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000) + ((((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.14286) + ((((meterReadingEnd - meterReadingStart) * 4.18 / 1000) + ((meterReadingEnd - meterReadingStart) * 5.85 / 1000)) * 0.057792) | number : 2}}</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Filtering a Currency Value
To let you display a number as currency, AngularJS provides a filter named currency. Here are two examples of applying it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.bold { font-weight: bold; }
</style>
<title>Payroll Evaluation</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Payroll Evaluation</h1>
<div class="container" ng-app ng-init="timeWorked=38; hSal=24.3;">
<form name="PayrollEvaluation">
<table style="width: 175px">
<tr>
<td class="bold">Time Worked:</td>
<td>{{timeWorked | number : 2}}</td>
</tr>
<tr>
<td class="bold">Hourly Salary:</td>
<td>{{hSal | currency}}</td>
</tr>
<tr>
<td class="bold">Net Pay:</td>
<td>{{timeWorked - hSal | currency}}</td>
</tr>
</table>
</form>
</div>
</body>
</html>
AngularJS and JavaScript Functions
AngularJS supports functions exactly as they are used in JavaScript.
AngularJS and Objects
AngularJS supports objects, including all of the characteristics of objects such as methods, constructors, arguments, and the this object, exactly as they are used in JavaScript.
|
|
||
| Previous | Copyright © 2001-2022, FunctionX | Next |
|
|
||