ng-model Directive in AngularJS

The ng-model directive can be used with
  • Input
  • Select
  • Textarea

Example: Use of function in AngularJS.

<html>
     <head>
          <script src="Scripts/angular.min.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body>
          <h2>AngularJS Sample Application</h2>
          <div ng-app="myModule" ng-controller="employeeCtrl">
               <table>
                    <tr><td>Enter first name: <input type = "text" ng-model = "Employee.firstName"></td></tr>
                    <tr><td>Enter last name: <input type = "text" ng-model = "Employee.lastName"></td></tr>
               </table>
               <br>
               <br>
               You are entering: {{Employee.fullName()}}
          </div>
          <script>
               var myApp = angular.module("myModule", []);
               myApp.controller('employeeCtrl', function ($scope)
               {
                    $scope.Employee =
                    {
                         firstName: "Raj",
                         lastName: "Parihar",
                         fullName: function ()
                         {
                              var empObject;
                              empObject = $scope.Employee;
                              return empObject.firstName + " " + empObject.lastName;
                         }
                    };
               });
          </script>
     </body>
</html>


Output:
sample app

The ng-model directive provides CSS classes for HTML elements, depending on their status and you can add or remove the following classes, according to the status of the form field:
  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending