Как скрыть столбец, установленный в таблице

Question

У меня есть таблица, что в сочетании с 2-мя столами

<div> 
     <div> 
      <table> 
       <colgroup> 
        <col style="width:95px" /> 
        <col style="width:95px" /> 
        <col style="width:95px" /> 
        <col style="width:95px" /> 
        <col style="width:95px" /> 
       </colgroup> 
       <tr class="header"> 
        <th colspan="2">Header1</th> 
        <th colspan="3">Header2</th> 
       </tr> 
       <tr> 
        <th>data1</th> 
        <th>data2</th> 
        <th>data3</th> 
        <th>data4</th> 
        <th>data5</th> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <div> 
     <table> 
      <colgroup> 
       <col style="width:95px" /> 
       <col style="width:95px" /> 
       <col style="width:95px" /> 
       <col style="width:95px" /> 
       <col style="width:95px" /> 
      </colgroup> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
     </table> 
    </div> 

Я хочу, чтобы нажать на одну ячейку в первой строке заголовка. Затем сверните все столбцы в группе, кроме первого столбца. Например, я нажимаю Header2, в соответствии с colspan, скрывает столбцы data4 и data5, только показывает столбец data3. Нажмите еще раз, чтобы показать все обратно.

Кроме того, если я не использую jquery, могу ли я сделать это только с помощью углового и CSS?

Спасибо, Чен

Answer 1

Вы пробовали использовать ng-click и ng-hide? Хороший и релевантный пример (несмотря на то, что он из всех так ужасных w3schools) можно найти здесь: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_hide