How To Get Textbox Value In Angularjs Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Amruta
In this tutorial we will show you how to get textbox value in angularjs controller, using directive of ‘ng-model’ we can collect textbox value then in controller using $scope object we can access that value.
Ng-model is a directive which binds input, select and textarea then stores the required user value in a variable and we can use that variable whenever we require that value.
Step By Step Guide On How To Get Textbox Value In Angularjs Controller :-
Here in our application we defined input field for collect user input. When user clicks on ‘show’ button it loads ‘show()’ function we defined this on controller.
Here we checks whether user entered correct details or without filled input field leaved as empty it will be gives alert message as ‘Please enter name’.
Otherwise user entered name will displayed on alert box with ‘Hello’ message by $scope object because it can access elements values.
<!DOCTYPE html>
<html>
<head>
<title>Get Textbox Value</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope,$window){
$scope.show=function(){
if(typeof($scope.name)=="undefined" || $scope.name==""){
$window.alert("please enter name");
return;
}
$window.alert("Hello "+$scope.name);
}
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="ctrl">
<input type="text" ng-model="name">
<input type="button" value="show" ng-click="show()">
</div>
</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.
- In controller we created ‘app’ variable used to store our application ‘myapp’ and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements and we defined function with parameters ‘$scope, $window.
- Within that using $scope object we defined our function ‘show()’, here in if() condition we checking whether user input contain null or undefined type.
- If() condition returns ‘true’ means it will display ‘please enter name’ message on window alertbox otherwise it return ‘false’ then it will display ‘user name’ with ‘Hello’ message on window alertbox.
- 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.
- In <div> tag we declared our ng-app with name ‘myapp’ it defines our application and defined ng-controller ‘ctrl’.
- Within that we defined two input tags with types of ‘text and submit’. One is for gets user input and another for submit option with event of ‘ng-click’. Using that we defined our show() function it will loads when user clicks on ‘submit’ option.
- 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 get textbox value using angularjs controller.
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 when user clicks on ‘submit’ button it will loads show() function then it check user input then displays result on alert box.
I hope this tutorial on how to get textbox value in angularjs controller helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
