javascript - 没有 Javascript 的 ng-hide 和 ng-show

Question

为了在 AngularJS 中完全不使用 Javascript 来隐藏和显示一些菜单。我像下面一样使用 ng-hide 和 ng-show 。

<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/

更新的问题:当菜单 1 处于事件状态时，如何使菜单 2 和 3 消失？

Answer 1

在 ng-click 上，您需要应用更改状态的逻辑。请看一下ng-init(但最好避免它)

<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>

这是实时示例:http://jsfiddle.net/39Lm68vj/3/