angular.js - How to implement folding content in Angularjs

Question

I used the ng-repeat instruction of Angularjs to output a piece of data from the server. The code is similar to: <table>

      <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>
          

I want the data inside to be folded. For example, if itNo is equal to 1, only the first one will be displayed. Then click the plus sign to expand and see the rest of the information. How to do this and how to write it?

Answer 1

The first line displays the 0th element of the array by default and is not placed in ng-repeat. Then write a tr and loop, starting from the first one in the array and looping to the end.
Add the ng-show attribute to tr, initialize the expression to false, and hide it by default. When the plus sign is clicked, the expression evaluates to true and other elements starting from the second line are displayed.

Answer 2

It is best to define folding as a component through instructions, so as to better operate DOM operations, reusable components, or directly use the defined components in Angular UI

Answer 3

ui-bootstrap has Tabs inside, you can take a look