AngularJS ng-model Directive with Example

  Total Views : 948
  Comments : 0
 
  Keywords : What is ngmodel directive in angularjs with example, How to use ng-model directive in angularjs with example, Documentation of angularjs ngmodel directive with example

Here we will learn ng-model directive in angularjs with example, uses of ngmodel directive and how to use ng-model directive in angularjs with example.

AngularJS ng-model Directive

In angularjs ng-model directive is used to get value of input controls like textbox, label, etc and bind that value to application data. Generally syntax of ng-model directive in angularjs like as shown below

Syntax of ng-model Directive in AngularJS

Following is the syntax of using ng-model directive in angularjs applications.

 

<div ng-app="">

<input type="text" id="txtname" ng-model="name" />

<p>Your Username: {{name}}</p>

</div>

If you observe above syntax we declared ng-model="name" for textbox controller because of that when user type text in textbox control we can get that value use it whever it required. We will see complete example of ng-model directive in angularjs

Example of AngularJS ng-model Directive

Following is the example of using ng-model directive in angularjs applications.

 

Live Preview

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-model Directive example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

<div ng-app="">

Enter Number1:<input type="text" ng-model="number1" /><br /><br />

Enter Number2:<input type="text" ng-model="number2" />

<p>Result of Multiplication: {{number1 * number2}}</p>

</div>

</body>

</html>

If you observe above code we are getting two textbox control values by using ng-model property and doing multiplication of it. If we run this application our output will be like as shown below

Output of ng-model

Following is the result of using ng-model directive in angularjs applications.

 

Angularjs ngmodel directive example output or result

This is how we can ng-model directive in angularjs application to get input control values and we can use for required operations.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User