ng-hide and ng-show without Javascript

Question

In order to hide and display some menus without using Javascript at all in AngularJS. I played around with ng-hide and ng-show like below.

<a ng-click="showmenu1=true">Menu 1</a>
<a ng-click="showmenu2=true">Menu 2</a>
<a ng-click="showmenu3=true">Menu 3</a>

<form ng-show="showmenu1">
  <label> 1 </label>
</form>

<form ng-show="showmenu2">
  <label> 2 </label>
</form>

<form ng-show="showmenu3">
  <label> 3 </label>
</form>

http://jsfiddle.net/39Lm68vj/4/

Updated question: how do you make menus 2 and 3 disappear while menu 1 is active?

Answer 1

If you only want to show one of these at a time you would be better off simplifying this down to using only one variable.

<a ng-click="toggleMenu(1)">Menu 1</a>
<a ng-click="toggleMenu(2)">Menu 2</a>
<a ng-click="toggleMenu(3)">Menu 3</a>

<form ng-show="model.showmenu == 1">
  <label> 1 </label>
</form>

<form ng-show="model.showmenu == 2" ng-cloak>
  <label> 2 </label>
</form>

<form ng-show="model.showmenu == 3" ng-cloak>
  <label> 3 </label>
</form>

then in controller

$scope.model = {
    showmenu:1
}

$scope.toggleMenu = function(val){
    $scope.model.showmenu = val;
}

DEMO

Answer 2

On ng-click, you need to apply the logic for changing states. Please have a look at ng-init (but it is better to avoid it)

<a ng-click="showmenu1=!showmenu1">Menu 1</a>
<a ng-click="showmenu2=!showmenu2">Menu 2</a>
<a ng-click="showmenu3=!showmenu3">Menu 3</a>

<form ng-hide="!showmenu1">
  <label> 1 </label>
</form>

<form ng-hide="!showmenu2">
  <label> 2 </label>
</form>

<form ng-hide="!showmenu3">
  <label> 3 </label>
</form>

here is live sample: http://jsfiddle.net/39Lm68vj/3/

Answer 3

Another suggestion

<a ng-click="menu=1">Menu 1</a>
<a ng-click="menu=2">Menu 2</a>
<a ng-click="menu=3">Menu 3</a>

<form ng-show="menu == 1">
  <label> 1 </label>
</form>

<form ng-show="menu == 2">
  <label> 2 </label>
</form>

<form ng-show="menu == 3">
  <label> 3 </label>
</form>