简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - Angularjs 如何實作折疊內容
迷茫
迷茫 2017-05-15 17:06:39
0
3
562

我用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的，平常只顯示第一條，然後點擊加號之類的東西才能夠展開看到其餘的資訊。這個要怎麼做，怎麼寫呢？

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回覆(3)
阿神
阿神2017-05-15 17:08:39 3樓

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

點贊 +0
新增回覆
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-15 17:08:39 2樓

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

點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-05-15 17:08:39 1樓

ui-bootstrap 裡面有Tabs 可以看下

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！