0

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

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

单击编辑按钮一切都隐藏并显示视图 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 的编辑模式。

到目前为止工作正常。

问题:如果我点击“+Create new item”,“View 2”应该隐藏,“View 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 完美配合?有没有更好的处理方法?

任何帮助将不胜感激。

4

2 回答 2

3

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

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

这有帮助吗?

于 2015-04-07T17:11:55.500 回答
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

于 2015-04-07T17:21:18.083 回答