Introduction
In this article I will tell you how to compare two values using angular.equals.
We often create applications where we need to compare a few things just as in the case of entering a password and re-enter the password. In such a cases if the user is not providing the equal values then an error message needs to be shown. AngularJS provides a feature for doing that easily, angular.equals.
As we already know, using AngularJS we can create dynamic things that can be changed according to the user requirements, so here I will create an application that can compare dynamic data.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the View/JavaScript part of this application.
Write this code in the head section:
<script>
function x($scope) {
$scope.firstPassword = 'Anubhav';
$scope.secondPassword = 'Chaudhary';
$scope.func = function () {
alert(angular.equals($scope.firstPassword, $scope.secondPassword));
}
}
</script>
I have created a function and named it "x", in this function a few initial values are provided.
These initial values will be provided in the textboxes where the password needs to be entered and reentered.
After this I have created a function "func()", this function will compare the values of these variables and will show an alert message accordingly.
You can see that for comparing the values I have used angular.equals, and in the bracket I provided both of the variables along with $scope.
Now our View or JavaScript part is completed and we can work on the ViewModel of our application.
Step 3
Now I will work on the design or ViewModel part, write this code in the body section:
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<label>First Password: </label><input type="password" ng-model="firstPassword" />
<br />
<label>Re Enter Password: </label><input type="password" ng-model="secondPassword" />
<br />
<br />
<label ng-bind-template="Hello! {{firstPassword}} {{secondPassword}}"></label>
<input type="button" ng-click="func()" value="Test"/>
</div>
</form>
</body>
Here I took two Textboxes whose type is set to "password".
The first TextBox is bound to "firstPassword" and the second is bound to "secondPassword". This binding will provide the default values in these Textboxes.
After this a label is taken in which both the default passwords are bounded, this can be done using the ng-bind-template.
At the end a button is taken, on the click of this button the function func() is called.
Now our application is created and is ready for execution.
Output
On running the application you will see that some text is available in both of the textboxes in password format. Whatever is written in the Textboxes can be seen in the Label present after them.
![angular.compare]()
If I click on the button then a message will be shown that will show "false"; that's because the values were different:
![angular.compare]()
Now I am changing the text in the second TextBox and making it similar to the first one (you can check the Label). After making the changes I clicked on the button and a True message is displayed as in the following:
![angular.compare]()
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.firstPassword = 'Anubhav';
$scope.secondPassword = 'Chaudhary';
$scope.func = function () {
alert(angular.equals($scope.firstPassword, $scope.secondPassword));
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<label>First Password: </label><input type="password" ng-model="firstPassword" />
<br />
<label>Re Enter Password: </label><input type="password" ng-model="secondPassword" />
<br />
<br />
<label ng-bind-template="Hello! {{firstPassword}} {{secondPassword}}"></label>
<input type="button" ng-click="func()" value="Test"/>
</div>
</form>
</body>
</html>