使用 angularjs ng-show / ng-hide 显示和隐藏不同的内容答案

【问题标题】：Show and hide different contents with angularjs ng-show / ng-hide使用 angularjs ng-show / ng-hide 显示和隐藏不同的内容
【发布时间】：2015-04-08 01:21:18
【问题描述】：

我是 angularjs 的新手，并且正在努力根据不同的点击使用 ng-show 和 ng-hide 为显示和隐藏不同的 Div 制定一些逻辑。

PLUNKER

查看 1：

<div ng-hide="section1">
  <select>
    <option>Select List 1</option>
    <option>Select List 2</option>
  </select>
</div>
<div ng-hide="section1">
  <ul>
    <li ng-repeat="name in names">{{name.item}}</li>
  </ul>
  <button type="button" ng-click="section1=!section1">Edit</button>
</div>

最初它显示一个下拉列表、一些列表项和编辑按钮

点击编辑按钮一切都隐藏并显示视图2

视图 2：

<div ng-show="section1">
       <button type="button" ng-click="section2=!section2">+ Create New Item</button>
    </div>
    <div ng-show="section1">
      <ul>
        <li ng-repeat="name in names">
          <input type="text" ng-model="name.item">
        </li>
      </ul>
      <button type="button" ng-click="section1=!section1">Save</button>
    </div>

在视图 2 上有一个“创建新项目”按钮、与视图 1 的列表项具有相同值的输入字段列表和一个保存按钮。这个视图2基本上是视图1的编辑模式。

到目前为止工作正常。

问题：如果我点击“+创建新项目”，“视图 2”应该隐藏，“视图 3”应该打开。

视图 3 包含一些空白输入列表和“保存按钮”。单击“保存按钮”隐藏“视图 3”并再次打开“视图 1”。

查看 3

<div ng-show="section2">
      <ul>
        <li ng-repeat="name in names">
          <input type="text">
        </li>
      </ul>
      <button type="button" ng-click="section2=!section2">Save New List</button>
    </div>

我正在努力根据使用 ng-show 和 Hide 的不同按钮单击来管理 3 个不同的视图。单击“+创建新按钮”后，它无法正确显示和隐藏。

这是否可以使其仅与 ng-show & ng-hide 完美配合？有没有更好的处理方式？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs ng-show ng-hide

【解决方案1】：

处理您正在尝试做的事情的更好方法是使用一个变量来保存当前部分的索引。然后，您可以使用 ng-show="currentSection === 1" 之类的东西，我认为这样会更直接一些。

那么您的点击操作可能看起来更像ng-click="currentSection = 1"。这将显示所有带有ng-show="currentSection === 1" 的元素。

这有帮助吗？

【讨论】：