In this article I
am going to explain how to use the ng-show and ng-hide directive of AngularJs.
In the previous
article I have explained how to get first, last date and week day name of monthwith number of days in Sql Server, how to detect the leap year in Sql server
and how to get first and last date of year, count total number of days in yearin Sql server.
Description:
Ng-show and ng-hide
directive are used to show and hide the DOM element like textbox, div etc.
Implementation:
Ng-show example:
Example 1:
In this example show
the textbox on checkbox click.
<fieldset style="width:30%">
<legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
<div ng-app="mvcapp" ng-controller="AngularController">
Show and Hide textbox<input type="checkbox" ng-model="IsShow" /><br />
<input type="text" ng-show="IsShow"
</div>
</fieldset>
Result:
Example 2:
In this example show
div element on button click.
HTML Markup:
<fieldset style="width:30%">
<legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
<div ng-app="mvcapp" ng-controller="AngularController">
<input type="button" value="Show
Textbox" ng-click="hideshow()" /><br />
<div ng-show="Ishow">
Name : <input type="text" />
</div>
</div>
</fieldset>
Add the script:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var app = angular.module('mvcapp', []);
app.controller('AngularController', function ($scope) {
$scope.hideshow = function(){
$scope.Ishow = $scope.Ishow ? false:true;
}
});
</script>
Ng-hide example:
In this example hide
the displaying textbox on checkbox click.
Example 1:
<fieldset
style="width:30%">
<legend>AngualarJs Tutorial :
ng-show/ng-hide Directive</legend>
<div ng-app="mvcapp" ng-controller="AngularController">
Show and Hide textbox<input type="checkbox" ng-model="IsShow" /><br />
<input type="text" ng-hide="IsShow"
</div>
</fieldset>
Result:
Example 2:
In this example
hide the div element on button click.
<fieldset style="width:30%">
<legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
<div ng-app="mvcapp" ng-controller="AngularController">
<input type="button" value="Show
Textbox" ng-click="hideshow()" /><br />
<div ng-hide="Ishide">
Name : <input type="text" />
</div>
</div>
</fieldset>
Add the script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var app = angular.module('mvcapp', []);
app.controller('AngularController', function ($scope) {
$scope.Ishide = false;
$scope.hideshow = function () {
$scope.Ishide = $scope.Ishide ? false : true;
}
});
</script>
No comments:
Post a Comment