DOM – AngularJS
ng-disabled, ng-show, ng-hide and ng-click are used to bind application data to HTML elements. ng-disabled: ng-disabled is used to disable an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <input type = "checkbox" ng-model = "disableMe">Disable Button <input type = "button" ng-disabled = "disableMe" value="Hello" /> </div> Try ng-hide: ng-hide is used to hide an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <span ng-hide="true">NOT Visible.</span> <span ng-hide="false">Visible.</span> </div> Try ng-show: ng-show is used to show an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <span ng-show="true">Visible.</span> <span ng-show="false">NOT Vision.</span> </div> Try ng-click: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="" ng-init="click=1"> <span>Total click: {{ click }}</span> <input type="button" ng-click = "click = […]
Using Forms – AngularJS
AngularJS provides following flags to handle errors and validating the input. $dirty − indicates that value has is changed. $invalid − indicates that value is invalid. $error − gives the specific error. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="clickApp" ng-controller="clickCtrl"> <form name = "testFrm" novalidate> Enter name: <input type = "text" name = "tname" ng-model = "tname" required /> <span style = "color:red" ng-show = "testFrm.tname.$dirty && testFrm.tname.$invalid"> <span ng-show = "testFrm.tname.$error.required">Name is empty.</span> </span><br /> <input type = "email" name = "email" ng-model = "email" length = "20" required /> <span style = "color:red" ng-show = "testFrm.email.$dirty && testFrm.email.$invalid"> <span ng-show = […]
