angular.js - Angularjs 如何實作折疊內容

Question

我用Angularjs的ng-repeat指令從server輸出了一段數據，程式碼類似：

      <thead>
         <tr>
           <th>itNo</th>
           <th>itVP</th>                                                      
           </tr>
           </thead>
          <tbody>
       <tr class="paginationclass" ng-repeat="item in lists| orderBy:'itNo'| filter:query">
        <td>{{item.itNo}}</td>
        <td>{{item.itVP}}</td>

          </tr>
          </tbody>
          </table>
          

我想要裡面的資料實現折疊，例如itNo都等於1的，平常只顯示第一條，然後點擊加號之類的東西才能夠展開看到其餘的資訊。這個要怎麼做，怎麼寫呢？

迷茫2784 天前628

全部回覆(3)我來回復

第一行預設顯示陣列的第0個元素，不放在ng-repeat裡邊。然後在寫個tr，進行循環，從陣列第1個開始循環到最後。
tr上加ng-show屬性，表達式初始化為false，預設隱藏。當點選加號，則表達式賦值true，顯示第二行開始的其他元素。

最好透過指令把折疊定義成元件，更好的操作dom操作，可重複使用元件，或直接用，angular ui裡面的定義好的元件

ui-bootstrap 裡面有Tabs 可以看下

取消回覆

發布

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們免責聲明Sitemap

© php.cn All rights reserved

Answer 1

第一行預設顯示陣列的第0個元素，不放在ng-repeat裡邊。然後在寫個tr，進行循環，從陣列第1個開始循環到最後。
tr上加ng-show屬性，表達式初始化為false，預設隱藏。當點選加號，則表達式賦值true，顯示第二行開始的其他元素。

Answer 2

最好透過指令把折疊定義成元件，更好的操作dom操作，可重複使用元件，或直接用，angular ui裡面的定義好的元件

Answer 3

ui-bootstrap 裡面有Tabs 可以看下