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/

Answer 2

如果您只想一次显示其中一个，最好将其简化为仅使用一个变量。

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

然后在控制器

$scope.model = {
    showmenu:1
}

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

的 DEMO

Answer 3

另一个建议

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

没有Javascript的ng-hide和ng-show

3 个答案: