DOM stands for Document Object Model . AngularJS directives used to bind application data to with of HTML DOM elements.
ng-disabled : Disable a HTML control .The control is bind with a model.Depending of the model value , control become enable and disabled. ng-disabled work with Boolean value (true /false).
<input type="text" ng-disabled="myAdult" "/>
ng-show : Show a HTML control .The control is bind with a model . Depending of the model value , control become visble. ng-show work with Boolean value (true /false).
<input type="text" ng-show="myAdult" "/>
ng-hide : Hide a HTML control .The control is bind with a model . Depending of the model value , control become hide. ng-hide work with Boolean value (true /false).
<input type="text" ng-hide="myAdult" "/>
ng-click : Handle click event of a control.
<input type="text" ng-click="Reset()" "/>
Live Example
(Enter value ,then Submit Form)
Live Example Code
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope)
{
$scope.myInitial
= false;
$scope.myInitialRev
= false;
$scope.data1
= '';
$scope.data2
= '';
$scope.data3
= '';
$scope.show
= false;
$scope.hide
= true;
$scope.Save
= function
()
{
$scope.myInitial
= true;
$scope.myAdult
= true;
$scope.myData
= true;
$scope.myInitialRev
= false;
$scope.show
= true;
$scope.hide
= false;
$scope.data1
= "Well
Come "
+ $scope.myName + ".
Your Age is :"
+ $scope.myAge;
if
($scope.myAdult == true)
$scope.data2
= "Your
Parent Name : "
+ $scope.myParentName + ".
Your Parent Contact is :"
+ $scope.myParentContactNumber;
$scope.data3
= "Your
Application Received";
};
$scope.Reset
= function
()
{
$scope.myInitial
= false;
$scope.myAdult
= false;
$scope.myData
= false;
$scope.myInitialRev
= true;
$scope.show
= false;
$scope.hide
= true;
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:300px;"
>
<fieldset>
<legend
style="
font-weight:bold;
color
:Blue;"
>Health
Checkup Application Form</legend>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="myName"
ng-disabled="myData"/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="myAge"
ng-disabled="myData"/>
</td>
</tr>
<tr>
<td>
Are
you Adult ?
</td>
<td>
<input
type="checkbox"
ng-model="myAdult"
/>
</td>
</tr>
<tr>
<td>
Parent
Name :
</td>
<td>
<input
type="text"
ng-disabled="myAdult"
ng-model="myParentName"
/>
</td>
</tr>
<tr>
<td>
Parent
Contact Number :
</td>
<td>
<input
type="text"
ng-disabled="myAdult"
ng-model="myParentContactNumber"/>
</td>
</tr>
<tr>
<td>
<input
type="button"
ng-disabled="myInitial"
value="Submit"
ng-click="Save()"
/>
</td>
<td>
<input
type="button"
ng-disabled="myInitialRev"
value="Reset"
ng-click="Reset()"
/>
</td>
</tr>
<tr>
<td
colspan="2"
>
<span
style="font-weight:bold;
color:Maroon";
ng-show="show"
ng-hide="hide">{{data1}}</span>
<span
style="font-weight:bold;
color:Maroon";
ng-show="show"
ng-hide="hide">{{data2}}</span>
<span
style="font-weight:bold;
color:Maroon";
ng-show"show"
ng-hide="hide">{{data3}}</span>
</td>
</tr>
</table>
</fieldset>
</div>
No comments:
Post a Comment