如何使用AngularJS和ng-click摺疊和展開多個部分

我們一直在爲這個問題苦苦掙扎了很長一段時間，我們無法找到答案。我們正在使用Ionic與AngularJS進行動態視圖。如何使用AngularJS和ng-click摺疊和展開多個部分

我們想要點擊一個項目字段，在這種情況下是一個標題，並在可見和不可見之間進行切換。

我們有以下代碼：

<ion-item class="item-divider positive" ng-init="toShow=true" ng-click="toShow != toShow"> 
       Display Header 
      </ion-item> 
      <div ng-show="toShow"> 
       <ion-item class="row"> 
        <!-- items to show --> 
       </ion-item> 
      </div> 
     </ion-list>

我們不能得到這個工作。我們已經嘗試了互聯網上的大多數例子。我們也嘗試使用ng-click函數，但我們需要它是動態的，所以它也可以用於不同的領域。

請幫助我們

來源

2015-04-20 Danny Hoeve

好的我會問明顯 - 是否顯示改變，當你點擊標題？ –

你的第一個問題是，你有你的NG-點擊布爾語句。我假設你想ng-click="toShow = !toShow">

的第二個問題是，<ion-item>指令使用的分離範圍，讓您在ngClick屬性是針對toShow變量可能是使用隔離範圍，而不是父控制器正如您所料。解決這個問題的最好的方法是創建一個設定功能來處理toShow的值，如：

$scope.setToShow = function(){ 
    $scope.toShow = !$scope.toShow; 
}

現在您ngClick成爲

ng-click="setToShow()"

角應該尋找控制器，你」的功能d期望而不是在子範圍上創建新的屬性。

您也可以通過使用

ng-click=$parent.toShow = !$parent.toShow">

我不建議直接訪問$父母，因爲父母$最終會引用別的東西，如果另一個範圍得到的重構或添加東西。

編輯：使用數組是一種簡單的方法來跟蹤條件參數列表，就像你需要你的例子。

$scope.setToShow = function(index){ 
     $scope.toShowArr[index] = $scope.toShow[index] === undefined ? false : !$scope.toShow[index]; 
}

我正在用false處理未定義的條件，但您可能覺得需要做其他事情。

來源

2015-04-20 13:53:28 GMStevens

我瞭解您的解決方案非常棒而且它也有效，因爲我們已經試過這個。事情是我們需要使它變成動態的，利用這個解決方案，我們必須爲每個我們想要展開和摺疊的組件創建多個功能。這當然不是一個非常有效的方法。 –

然後使用數組跟蹤要隱藏/顯示的對象。您可以將當前單擊的項目的索引傳遞給setter函數，該函數繼而處理設置數組中該索引處的值。我編輯了我的答案，以提供一個簡單的例子。 – GMStevens

我想將此答案標記爲答案，但我們更改了代碼，因此適用於我們的應用程序。我們要麼沒有正確理解你的代碼，因爲每次它給出了未定義的錯誤。 –

你並不特別需要在你的控制器設置功能，只需事情是把一個$scope.toShow=false

另外，你不應該使用ng-init，如果你不在NG-重複根據角度的doc loop ：

唯一的適當使用ngInit的是別名特殊性質ngRepeat 的，如下面的演示看到。除了這種情況，您應該使用控制器而不是ngInit來初始化作用域上的值。

所以，在控制器：

$scope.toShow=false

和在您的模板：

<ion-item class="item-divider positive" ng-init="toShow=true" ng-click="toShow = !toShow"> 
       Display Header 
      </ion-item> 
      <div ng-show="toShow"> 
       <ion-item class="row"> 
        <!-- items to show --> 
       </ion-item> 
      </div> 
     </ion-list>

來源

2015-04-20 13:41:14 n00dl3

我改變了條件成一個assigment，但這是行不通的。當我點擊離子項時什麼也沒有發生。感謝您的幫助。 –

我看到你編輯了你的帖子。事情是，我們需要它的動態，正如我在我的問題中所說的那樣。 –

然後您必須製作自定義指令' {{content}}'... – n00dl3

如何使用AngularJS和ng-click摺疊和展開多個部分

回答

相關問題