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

Question

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

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

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

单击编辑按钮 Everything 隐藏和显示视图 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 上有一个按钮 "Create New item"，具有与视图 1 的列表项相同值的输入字段列表和一个保存按钮。此视图 2 基本上是视图 1 的编辑模式。

到目前为止工作正常。

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

视图 3 包含一些空白输入列表和 "Save button"。单击 "save button" 隐藏 "View 3" 并再次打开 "View 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 完美配合？有没有更好的处理方式？

如有任何帮助，我们将不胜感激。

Answer 1

处理您要执行的操作的更好方法是使用一个变量来保存当前部分的索引。然后，你可以使用像 ng-show="currentSection === 1" 这样的东西，我认为它会更直接一些。

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

的所有元素

有帮助吗？

Answer 2

我已经修改了你的 plunker 来解决你的问题。您需要在 ng-show

中同时使用这两个变量

ng-show="section1 && !section2"

http://plnkr.co/edit/rdKIT4leGM9U7BNoE01B?p=preview

有更好的方法可以实现您想要实现的目标。

例如尝试 ng-switch

https://docs.angularjs.org/api/ng/directive/ngSwitch

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

Show and hide different contents with angularjs ng-show / ng-hide

javascript

angularjs

ng-show

ng-hide