如何在AngularJS中简单地从子菜单切换/隐藏菜单

Question

所以我读了一些Stack，发现我必须创建单独的指令来隐藏/切换菜单的子菜单项。

我希望在单击任何子菜单项时隐藏菜单。

但我觉得必须有一个更简单的方法，我想知道是否有人知道？

到目前为止，我已经将我的代码设置为列出项目，这些项目创建了具有指定值的选项卡。选择子菜单项时，将隐藏除所选选项卡值之外的所有选项卡。这样就不会重新加载页面，也不会传递任何参数。

<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1)">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2)">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3)">Contact</a></li>
</ul>
...<div ng-show="navi.isSelected(1)">...
...<div ng-show="navi.isSelected(2)">...
...<div ng-show="navi.isSelected(3)">...

我希望能尽快解决。我附上了一个带有plunkr的函数原型：这里

同样，这只是一个原型。最终的版本会被幻想出来。我只是在寻求功能方面的建议。

Answer 1

如果我正确理解你，那么你可以这样做：

<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1); toggle = false">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2); toggle = false">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3); toggle = false">Contact</a></li>
</ul>

或者创建一个同时执行selectTab(index)和toggle = false的函数。并在ng-click 中调用它