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

Question

我是新的angularjs，并努力使一些逻辑显示和隐藏不同的Div使用ng-show和ng-hide基于不同的点击。

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的编辑模式。

Upto现在可以正常工作。

问题：如果我点击“+创建新项目”，“查看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-显示和隐藏到管理3个不同的看法。它没有正确显示和隐藏点击“+创建新按钮”。

这是否可能使它与ng-show完美配合&只有ng-hide？ 有没有更好的方法来处理？

任何帮助将不胜感激。

Answer 1

处理你想要做的事情的一个更好的方法是拥有一个保存当前部分索引的变量。然后，你可以使用类似ng-show="currentSection === 1"的东西，我认为它会更简单一点。

然后您的点击动作看起来更像ng-click="currentSection = 1"。这将显示所有元素ng-show="currentSection === 1"。

这有帮助吗？

Answer 2

我修改了你的解决方案来解决你的问题。您需要使用这两个变量在NG-显示

ng-show="section1 && !section2" 

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

有更好的方法来达到你想达到的目标。

尝试NG-开关例如

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