If Condition In Angularjs Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Anjali
In this tutorial we will show you the solution of if condition in angularjs controller, If condition always used to checks any events, process or values, etc.
So here we checking some string with user input whether those similar or not if returns true means it result will print respective block statement otherwise it returns false so result will print respective block statement to the webpage browser.
So we can identify whether our program works correctly or not and which block is executed likewise using if condition we identify more results.
Step By Step Guide On If Condition In Angularjs Controller :-
Here in controller we are checking some string in our example we used string ‘Hello’ with user inputs we can use any other strings also, whether checks those are similar or not if returns true means it result will print ‘OK’ otherwise it returns false so result will print ‘NOT OK’ to the webpage browser.
So we can identify which block is executed and also whether our checking condition process working correctly or not. The $watch object is used to control the value changes for sometimes.
<!DOCTYPE html>
<html>
<head>
<title>If Condition</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script>
function Test($scope){
$scope.inputs='';
$scope.$watch('inputs', function (){
if($scope.inputs == 'hello'){
$scope.output="OK";
}
else{
$scope.output="NOT OK";
}
});
}
</script>
</head>
<body>
<div ng-app="" ng-controller="Test">
<input type="text" ng-model="inputs">
<p>{{output}}</p>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- We created ‘Test’ controller in application we need to define function with controller name with $scope object and initialized string ‘inputs’ with null value.
- Using $scope object we defined our function with $watch object it is used to watch elements value changes within that we checking user input value is ‘Hello’ or not using if condition.
- If user input is ‘Hello’ then it will print ‘OK’ otherwise it will print ‘NOT OK’ to the webpage browser.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we declared our ng-app as empty it defines our application and controller of application namely ‘Test’ defined by ng-controller directive.
- For collecting ‘user input’ we defined ‘input’ tag with attribute of ‘ng-model’ values ‘inputs’ to collect input value and returns to controller by $scope object because it can access application element values easily.
- When printing anything on webpage we need to use double curly braces within variable name. All <div> tag needs to close respectively.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use if condition using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program within div we defined input field when user filling input fields it is checking whether entered string is ‘Hello’ or not then prints respective output of ‘OK or NOT OK’ to the webpage browser.
I hope this tutorial on if condition in angularjs controller helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
