• Core Java
  • JavaScript
  • Java IO
  • Struts
  • JSP
  • Servlet
  • jQuery
  • PHP
  • Spring

  • <

    AngularJS Forms

    Forms in AngularJS provides data-binding and validation of input controls.

    Angularjs input controls are:

  • input elements

  • select elements

  • button elements

  • textarea elements


  • Angularjs Events



  • ng-click

  • ng-dbl-click

  • ng-mousedown

  • ng-mouseup

  • ng-mouseenter

  • ng-mouseleave

  • ng-mousemove

  • ng-mouseover

  • ng-keydown

  • ng-keyup

  • ng-keypress

  • ng-change


  • Data-Binding

    ng-model directive is used to provide data binding.

    Let's take an example where ng-model directive binds the input controller to the rest of your application

    Example
    
       <!DOCTYPE html>  
    <html lang="en">  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body>  
    <div ng-app="myApp" ng-controller="formCtrl">  
      <form>  
        First Name: <input type="text" ng-model="firstname">  
      </form>  
    </div>  
    <script>  
    var app = angular.module('myApp', []);  
    app.controller('formCtrl', function($scope) {  
        $scope.firstname = meant";  
    });  
    </script>  
    </body>  
    </html>   
    
    


    Example
    <!DOCTYPE html>  
    <html>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body>  
    <div ng-app="">  
      <form>  
        First Name: <input type="text" ng-model="firstname">  
      </form>  
      <h2>You entered: {{firstname}}</h2>  
    </div>  
    <p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>  
    </body>  
    </html>  
    
    
    


    AngularJS Checkbox

    A checkbox has a value true or false. The ng-model directive is used for a checkbox.



    <!DOCTYPE html>  
    <html>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body>  
    <div ng-app="">  
      <form>  
        Check to show this:  
        <input type="checkbox" ng-model="myVar">  
      </form>  
      <h1 ng-show="myVar">Checked</h1>  
    </div>  
    <p>The ng-show attribute is set to true when the checkbox is checked.</p>  
    </body>  
    </html>  
    
    
    


    AngularJS Radio Buttons

    ng-model directive is used to bind radio buttons in your applications.

    Let's take an example to display some text, based on the value of the selected radio buttons. In this example, we are also using ng-switch directive to hide and show HTML sections depending on the value of the radio buttons.

    Example
    
    <!DOCTYPE html>  
    <html>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body ng-app="">  
    <form>  
      Pick a topic:  
      <input type="radio" ng-model="myVar" value="tuts">Tutorials  
      <input type="radio" ng-model="myVar" value="fest">Festivals  
      <input type="radio" ng-model="myVar" value="news">News  
    </form>  
    <div ng-switch="myVar">  
      <div ng-switch-when="tuts">  
         <h1>Tutorials</h1>  
         <p>Welcome to the best tutorials over the net</p>  
      </div>  
      <div ng-switch-when="fest">  
         <h1>Festivals</h1>  
         <p>Most famous festivals</p>  
      </div>  
      <div ng-switch-when="news">  
         <h1>News</h1>  
         <p>Welcome to the news portal.</p>  
      </div>  
    </div>  
    <p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>  
    </body>  
    </html>  
    
    


    AngularJS Selectbox

    ng-model directive is used to bind select boxes to your application.


    Example
    <!DOCTYPE html>  
    <html>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body ng-app="">  
    <form>  
      Select a topic:  
      <select ng-model="myVar">  
        <option value="">  
        <option value="tuts">Tutorials  
        <option value="fest">Festivals  
        <option value="news">News  
      </select>  
    </form>  
    <div ng-switch="myVar">  
      <div ng-switch-when="tuts">  
         <h1>Tutorials</h1>  
         <p>Welcome to the best tutorials over the net.</p>  
      </div>  
      <div ng-switch-when="fest">  
         <h1>Festivals</h1>  
         <p>Most famous festivals.</p>  
      </div>  
      <div ng-switch-when="news">  
         <h1>News</h1>  
         <p>Welcome to the news portal.</p>  
      </div>  
    </div>  
    <p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>  
    </body>  
    </html>  
    


    AngularJS form example


    <!DOCTYPE html>  
    <html>  
       <head>  
          <title>Angular JS Forms</title>  
          <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
            
          <style>  
             table, th , td {  
                border: 1px solid grey;  
                border-collapse: collapse;  
                padding: 5px;  
             }  
               
             table tr:nth-child(odd) {  
                background-color: lightpink;  
             }  
               
             table tr:nth-child(even) {  
                background-color: lightyellow;  
             }  
          </style>  
            
       </head>  
       <body>  
            
          <h2>AngularJS Sample Application</h2>  
          <div ng-app = "mainApp" ng-controller = "studentController">  
               
             <form name = "studentForm" novalidate>  
                <table border = "0">  
                   <tr>  
                      <td>Enter first name:</td>  
                      <td><input name = "firstname" type = "text" ng-model = "firstName" required>  
                         <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">  
                            <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>  
                         </span>  
                      </td>  
                   </tr>  
                     
                   <tr>  
                      <td>Enter last name: </td>  
                      <td><input name = "lastname"  type = "text" ng-model = "lastName" required>  
                         <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">  
                            <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>  
                         </span>  
                      </td>  
                   </tr>  
                     
                   <tr>  
                      <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>  
                         <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">  
                            <span ng-show = "studentForm.email.$error.required">Email is required.</span>  
                            <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>  
                         </span>  
                      </td>  
                   </tr>  
                     
                   <tr>  
                      <td>  
                         <button ng-click = "reset()">Reset</button>  
                      </td>  
                      <td>  
                         <button ng-disabled = "studentForm.firstname.$dirty &&  
                            studentForm.firstname.$invalid || studentForm.lastname.$dirty &&  
                            studentForm.lastname.$invalid || studentForm.email.$dirty &&  
                            studentForm.email.$invalid" ng-click="submit()">Submit</button>  
                      </td>  
                   </tr>  
                          
                </table>  
             </form>  
          </div>  
            
          <script>  
             var mainApp = angular.module("mainApp", []);  
               
             mainApp.controller('studentController', function($scope) {  
                $scope.reset = function(){  
                   $scope.firstName = "java";  
                   $scope.lastName = "meant";  
                   $scope.email = "support@javameant.com";  
                }  
                  
                $scope.reset();  
             });  
          </script>  
            
       </body>  
    </html>  
    
    
    
















    © copyright 2017-2021 Completedone pvt ltd.