AngularJS Tutorial - Control Show hide with ng-show and model

The following code shows how to Control Show hide with ng-show and model.

Example


<!DOCTYPE html>
<html  ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head><!--from   ww w  .j  a  v  a 2s  .  c  o m-->
<body>
  <script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>

<ul>
    <li><a href ng:click="selected=1">First</a></li>
    <li><a href ng:click="selected=2">Second</a></li>
    <li><a href ng:click="selected=3">Third</a></li>
</ul>

<div ng:show="selected == 1">
    This is first content...
</div>

<div ng:show="selected == 2">
    This is second content...
</div>

<div ng:show="selected == 3">
    This is third content...
</div>
<script type='text/javascript'>
</script>
</body>
</html>

The code above is rendered as follows: