ng-hide / ng-show in angular JS are directives that which can have the type as Boolean value resulting true or false. Based on this value the behavior of the element to which we used this attribute is going to be change.
Sample Look :
<span ng-hide="hdpin">{{pinnum}}</span>
Sample Look :
<span ng-hide="hdpin">{{pinnum}}</span>
The point between both the attributes ng-hide and ng-show is that they both are negations to each other in their resulting behavior.
For Example from the above, if the “hdpin” is set to true, then it effects for both ng-hide as true and ng-show also as true.
Then where does they both varies ?
The internal process will be as like, the angular contains a pre-defined CSS class as “.ng-hide” which makes the style attribute “display” as to “none”.
Even though they both results with same boolean value the behavior like css attribute “display” is going to be varied.
Let us assume they both are with the result “true” then, ng-show, will shows the concern element in the page by setting the display property not to none, where as the ng-hide will not show the element in the page by setting the display property to none in css.
Angular also stated that they had provided the “!important” flag to the rendered elements style to avoid the conflicts that which may occur by other .css source files. Means like if the ng-hide=true, It renders as like display : none !important.
Complex or multiple expression :
We can also go for multiple or complex expressions within ng-hide / ng-show directives. But most of the times for the longer scenerio better to have the result from the controllers instead of working within the directive.
For Example from the above, if the “hdpin” is set to true, then it effects for both ng-hide as true and ng-show also as true.
Then where does they both varies ?
The internal process will be as like, the angular contains a pre-defined CSS class as “.ng-hide” which makes the style attribute “display” as to “none”.
Even though they both results with same boolean value the behavior like css attribute “display” is going to be varied.
Let us assume they both are with the result “true” then, ng-show, will shows the concern element in the page by setting the display property not to none, where as the ng-hide will not show the element in the page by setting the display property to none in css.
Angular also stated that they had provided the “!important” flag to the rendered elements style to avoid the conflicts that which may occur by other .css source files. Means like if the ng-hide=true, It renders as like display : none !important.
Complex or multiple expression :
We can also go for multiple or complex expressions within ng-hide / ng-show directives. But most of the times for the longer scenerio better to have the result from the controllers instead of working within the directive.
Sample look :
<span ng-hide="user=’Admin’ || user=’Employee’">{{pinnum}}</span>
<span ng-hide="user=’Admin’ || user=’Employee’">{{pinnum}}</span>
Example on ng-show and ng-hide :
JS Code :
<script type="text/javascript">
JS Code :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrl', ['$scope', function ($scope) {
$scope.pinnum = "3453";
}]);
</script>
HTML Code :
<body ng-app="myapp" ng-controller="ctrl">
<body ng-app="myapp" ng-controller="ctrl">
Details : <input type="checkbox" ng-model="hdpin" /><br /><br />
Pin Number by ng-hide : <span ng-hide="hdpin">{{pinnum}}</span><br />
Pin Number by ng-show : <span ng-show="hdpin">{{pinnum}}</span>
</body>
Code Result on uncheck :
Code Result on uncheck :
To find the CSS level difference please look over video file.
No comments:
Post a Comment