The ng-Show and ng-Hide are use to show or hide the HTML elements in the angularjs single page apps. Live plnker demo
The angularjs provided the functions which are ng-Show and
ng-Hide.
<div ng-hide="true">if ng-hide is true then show contents of this div.</div>
<div ng-show="true">if ng-show is true then show contents of
this div. </div>
Example.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script>
function
mainController($scope) {
$scope.display = {
ngShow: true,
ngHide: true,
showContent: 'This is ng-show and ng-hide in angularjs contents'
};
}
</script>
</head>
<body ng-app>
<div ng-controller="mainController">
<h2>ng-show and ng-hide in angularjs</h2>
<div>
<div ng-show="display.ngShow">
ng-Show : {{display.ngShow}} , {{display.showContent}}
</div>
<div ng-hide="display.ngHide">
{{display.ngHide}} : {{display.hideContent}}
</div>
</div>
</div>
</body>
</html>
