jebmarcus jebmarcus - 5 months ago 14
Javascript Question

ng-hide and ng-show without Javascript

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

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

Comments