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

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

ng-hide and ng-show without Javascript

javascript

angularjs

ng-show

ng-hide