AngularJS Model, TutorialsPoint, AngularJS Model Tutorial

AngularJS Model

The AngularJS model is responsible for managing application data. It responds to the requests from view and to the instructions from controller to update itself. The ng-model directive binds the value of HTML controls (<input>, <select>, <textarea>) to application data.

The ng-model Directive

With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Model</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="my_App" ng-controller="myCtrl">
<label>Name :</label>
    <input ng-model="name" placeholder="Your Name">
</div>
 
<script type="text/javascript">
  var app = angular.module('my_App', []);
  app.controller('myCtrl', function($scope) {
     $scope.name = "Ramana Reddy";
  });
</script>
 
</body>
</html>

Output :

The ng-model Directive Two way Data Binding

Two way data binding model as the single-source-of-truth in your application. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Model - Two way Data Binding</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="my_App" ng-controller="myCtrl">
<label>Name :</label>
    <input ng-model="name" placeholder="website name">
    <h2>Website Name : {{name}}.</h2>
    <h3>(or)</h3>
    <h2>Website Name : <a href="{{name}}" target="_blank">{{name}}</a>.</h2>
 
</div>
 
<script type="text/javascript">
  var app = angular.module('my_App', []);
  app.controller('myCtrl', function($scope) {
     $scope.name = "http://www.freetimelearning.com";
  });
</script>
 
</body>
</html>

Output :

AngularJS Tutorial