What is ng-model in AngularJs?
ng-model is a directive in Angular.JS that represents models and its primary purpose is to bind the "view" to the "model".
For example, suppose you wanted to present a simple page to the end user like the one shown below which asks the user to enter the "First name" and "Last name" in textboxes. And then you wanted to ensure that you store the information that the user has entered in your data model.
You can use the ng-model directive to map the text box fields of "First name" and "Last Name" to your data model.
The ng-model directive will ensure that the data in the "view" and that of your "model" are kept in sync the whole time.
In this tutorial, you will learn-
- The ng-model attribute
- How to use ng-model
- Text Area
- Input elements
- Select element form Dropdown
The ng-model Attribute
As discussed in the introduction to this chapter, the ng-model attribute is used to bind the data in your model to the view presented to the user.
The ng-model attribute is used for,
- Binding controls such as input, text area and selects in the view into the model.
- Provide a validation behavior - for example, a validation can be added to a text box that only numeric characters can be entered into the text box.
- The ng-model attribute maintains the state of the control (By state, we mean that the control and the data is bound to be always kept in sync. If the value of our data changes, it will automatically change the value in the control and vice versa)
How to use ng-model
1) Text Area
The text area tag is used to define a multi-line text input control. The text area can hold an unlimited number of characters, and the text renders in a fixed-width font.
So now let's look at a simple example of how we can add the ng-model directive to a text area control.
In this example, we want to show how we can pass a multiline string from the controller to the view and attach that value to the text area control.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Code Explanation:
- The ng-model directive is used to attach the member variable called "pDescription" to the "textarea" control.
The "pDescription" variable will actually contain the text, which will be passed on to the text area control. We have also mentioned 2 attributes for the textarea control which is rows=4 and cols=50. These attributes have been mentioned so that we can show multiple lines of text. By defining these attributes the textarea will now have 4 rows and 50 columns so that it can show multiple lines of text.
- Here we are attaching the member variable to the scope object called "pDescription" and putting a string value to the variable.
- Note that we are putting the /n literal in the string so that the text can be of multiple lines when it is displayed in the text area. The /n literal splits the text into multiple lines so that it can render in the textarea control as multiple lines of text.
If the code is executed successfully, the following Output will be shown when you run the code in the browser.
Output:
From the output
- It can be clearly seen that the value assigned to the pDescription variable as part of the scope object was passed to the textarea control.
- Subsequently, it has been displayed when the page is loaded.
2) Input elements
The ng-model directive can also be applied to the input elements such as the text box, checkboxes, radio buttons, etc.
Let's look at an example of how we can use the ng-model with the "textbox" and "checkbox" input type.
Here we will have a text input type which will have the name of "Guru99" and there will be 2 checkboxes, one which will be marked by default and the other will not be marked.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Code Explanation:
- The ng-model directive is used to attach the member variable called "pname" to the input type text control. The "pname" variable will contain the text of "Guru99" which will be passed on to the text input control. Note that any name can be given to the name of the member variable.
- Here we are defining our first checkbox "Controllers" which is attached to the member variable Topics.Controllers. The checkbox will be marked for this check control.
- Here we are defining our first checkbox "Models" which is attached to the member variable Topics.Models. The checkbox will not be marked for this check control.
- Here we are attaching the member variable called "pName" and putting a string value of "Guru99".
- We are declaring a member array variable called "Topics" and giving it two values, the first is "true" and the second is "false".
So when the first checkbox gets the value of true, the check-box will be marked for this control, and likewise, since the second value is false, the check-box will not be marked for this control.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be clearly seen that the value assigned to the pName variable is "Guru99"
- Since the first check value is "true" it passed, the checkbox is marked for the "Controllers" checkbox. Likewise since the second value is false, the checkbox is not marked for the "Models" checkbox.
3) Select element form Dropdown
The ng-model directive can also be applied to the select element and be used to populate the list items in the select list.
Let's look at an example of how we can use the ng-model with the select input type.
Here we will have a text input type which will have the name of "Guru99" and there will be a select list with 2 list items of "Controller" and "Models".
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- The ng-model directive is used to attach the member variable called "Topics" to the select type control. Inside of the select control, for each of the options, we are attaching the member variable of Topics.option1 for the first option and Topics.option2 for the second option.
- Here we are defining our Topics array variable which holds 2 key-value pairs. The first pair has a value of "Controllers" and the second has the value of "Models". These values will be passed to select input tag in the view.
If the code is executed successfully, the following Output will be shown.
Output:
From the output, it can be seen that the value assigned to the pName variable is "Guru99" and we can see that the select input control has the options of "Controllers" and "Models".
Summary
- Models in Angular JS are represented by the ng-model directive. The primary purpose of this directive is to bind the view to the model. How to build a simple controller using the ng-app, ng-controller and ng-model directives.
- The ng-model directive can be linked to a "text area" input control and multiline strings can be passed from the controller to the view.
- The ng-model directive can be linked to input controls like the text and checkbox controls to make them more dynamic at run time.
- The ng-model directive can also be used to populate a select list with options which can be displayed to the user.