×

Html & Html5

The World's best Software Development Study Portal

AngularJS ng-model Directives


  • ng-model directive defines the model/variable to be used in AngularJS Application.

  • ng-model Creates a FormControl instance from a domain model and binds it to a form control element.

  • With the ng-model directive we can bind the value of an input field.

  • For eaxmple:





     <div ng-app ="myApp" ng-controller="myCtrl">
      Name: <input  ng-model ="name">
      </div>
    
      <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
      $scope.name = "IT training institute";
      });
      </script>

    Output
    Name: IT training institute





  • The binding goes both ways called Two-Way Data Binding If the user changes the value inside the input field, the AngularJS property will also change its value.

  • The ng-model directive can provide type validation for application data (number, e-mail, required).

  • The ng-model directive can provide status for application data (valid, dirty, touched, error).

  • The ng-model directive provides CSS classes for HTML elements, depending on their status.