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>

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

单击“编辑”按钮“全部隐藏”并显示“视图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上有一个按钮＆＃34;创建新项目＆＃34; ，具有相同视图值的输入字段列表1的列表项和保存按钮。该视图2基本上是编辑模式的视图1.

现在工作正常。

问题：如果我点击＆＃34; +创建新项目＆＃34;，＆＃34;查看2＆＃34;应隐藏和＆＃34;查看3＆＃34;应该打开。

视图3包含一些空白输入列表和＆＃34;保存按钮＆＃34;。点击＆＃34;保存按钮＆＃34;隐藏＆＃34;查看3＆＃34;并再次打开＆＃34;查看1＆＃34;。

查看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个不同的视图。它没有正确显示和隐藏点击＆＃34; +创建新按钮＆＃34;。

这是否可以使其与ng-show＆amp; amp;仅限于隐藏？还有更好的办法吗？

任何帮助将不胜感激。

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显示和隐藏不同的内容

2 个答案: