用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