×

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.

  • The various purposes of ngmodel are as follows:


    1.View is bind with a model using ng-model directive, which other directives such as input, select or text area will require.
    2.Validations behaviour can be provided using it.
    3.We can use ngmodel to keep the state of control.
    4.ngmodel is responsible for registering the control with its parent form.