pTotal click clickCounter p button ng click clickCounter clickCounter 1Click

Ptotal click clickcounter p button ng click

This preview shows page 14 - 20 out of 28 pages.

<p>Total click: {{ clickCounter }}</p> <button ng-click = "clickCounter = clickCounter + 1">Click Me!</button> Example: <html> <head> <title>AngularJS HTML DOM</title> </head> <body> <h2>AngularJS HTML DOM</h2> <div ng-app = "">
Image of page 14
<table border = "0"> <tr> <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td> <td><button ng-disabled = "enableDisableButton">Click Me!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide1">Show Button</td> <td><button ng-show = "showHide1">Click Me!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td> <td><button ng-hide = "showHide2">Click Me!</button></td> </tr> <tr> <td><p>Total click: {{ clickCounter }}</p></td> <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td> </tr> </table> </div> <script src = "angular.min.js"></script> </body> </html> Output:
Image of page 15
AngularJS – Forms AngularJS enriches form filling and validation. We can use ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations in seemless way. Use novalidate with a form declaration to disable any browser specific validation. Forms controls makes heavy use of Angular events. Events: AngularJS provides multiple events which can be associated with the HTML controls. For example ng- click is normally associated with button. Following are supported events in Angular JS.
Image of page 16
ng-click: Reset data of a form using on-click directive of a button. Validate data: Following can be used to track error. $dirty − states that value has been changed. $invalid − states that value entered is invalid. $error − states the exact error. Following example will showcase all the above mentioned directives. Example: <html> <head> <title>Angular JS Forms</title> <script src = "angular.min.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Forms Example</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <form name = "studentForm" novalidate> <table border = "0"> <tr> <td>Enter first name:</td>
Image of page 17
<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 = "Sidra";
Image of page 18
$scope.lastName = "Shafi";
Image of page 19
Image of page 20

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture