0

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?

kevin_b
  • 803
  • 4
  • 16
  • 34

3 Answers3

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/

JanisP
  • 1,233
  • 15
  • 16
  • however what if I want to make menu 2 and 3 disappear while menu 1 is active? Using the fiddle I provided? – kevin_b Feb 24 '16 at 01:38
  • thank you I see that you used ng-init here but mentioned in the response it is best to avoid it. Why avoid it? – kevin_b Feb 24 '16 at 01:56
  • @jebmarcus because it is performing "eval" for the expression – JanisP Feb 24 '16 at 02:03
  • can you please clarify what it means to perform eval? – kevin_b Feb 24 '16 at 02:10
  • @jebmarcus this function http://www.w3schools.com/jsref/jsref_eval.asp and the reason not to use it here: http://stackoverflow.com/a/86580/5131537 and official documentation here: https://docs.angularjs.org/api/ng/directive/ngInit – JanisP Feb 24 '16 at 02:23
0

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • thank you but is there anyway to accomplish this without involving the controller? – kevin_b Feb 24 '16 at 01:43
  • Why wouldn't you want to involve a controller? You would need to put things needlessly on rootscope and there is no point in doing that. Hiding variables in the view just makes testing more difficult – charlietfl Feb 24 '16 at 01:44
  • I feel like my controller already has too much stuff in it, seems messy – kevin_b Feb 24 '16 at 01:49
  • So use a separate controller or directive. Your reasoning is not sensible whatsoever. If controller is getting messy time to move a bunch of logic to service or start breaking up controller into other controllers or directives – charlietfl Feb 24 '16 at 01:51
  • Also can start running into child scope problems using that philosophy – charlietfl Feb 24 '16 at 01:52
  • thank you. What kind of child scope problems are you talking about? – kevin_b Feb 24 '16 at 01:56
  • suppose you put an `ng-repeat` on menu or the forms. Using a primitive variable in view only won't work due to child scopes that `ng-repeat` creates. Or if there was an `ng-if` in any of this, or `ng-include` or .... – charlietfl Feb 24 '16 at 01:57
0

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>
Vlant
  • 13
  • 7