Диапазон строк таблицы AngularJS

Как сделать диапазон строк в таблице начальной загрузки с помощью Angular JS? Моя таблица создана с использованием ng-repeat. С ng-repeat я думаю, что это невозможно. Итак, я смотрю на ng-grid и ng-table, у обоих есть группировка. но они создают складную колонку. не совсем диапазон строк. поэтому, пожалуйста, дайте мне знать мои варианты.

Я пытаюсь добиться следующего:

<table border="1" >
    <tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
</tr>   
      <tr>
        <td rowspan="3">Jill</td>
        <td>Smith</td> 
        <td>50</td>
    </tr>
     <tr>

        <td>Smith2</td> 
        <td>60</td>
    </tr>
     <tr>            
        <td>Smith3</td> 
        <td>70</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
  </tr>
</table>

http://plnkr.co/edit/1VBQGVoamQbqv9uYmnWB?p=preview

Но это не статические данные, это будет список объектов с сервера. Любая помощь приветствуется


angularjs html-table twitter-bootstrap-3 ng-grid ngtable
person Mukun    schedule 14.10.2014    source источник
comment
Чтобы добавить rowspan к вашему JSON, вы связываете свою серверную часть с вашими клиентскими концепциями. Что, если вы хотите использовать этот JSON на устройстве? Да, свойство JSON можно игнорировать, но у нас там уродливый код. Альтернативным вариантом может быть использование ng-repeat-first.   -  person Saeed Neamati    schedule 06.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить свойство rowspan в свой JSON. Нравиться:

myJson = [{attr1:'foo', attr2:'bar',rowspan:2},{attr1:'foo', attr2:'bar',rowspan:0}];

Затем вы можете использовать как ng-if, так и rowspan следующим образом:

<tr>
    <td ng-if="item.rowspan>0" rowspan="{{item.rowspan}}">{{item.attr1}}</td>
    <td>{{item.attr2}}</td>
<tr>

Вы можете перебрать JSON и условно добавить rowspan:

data.forEach(function(item){
    if(someCondition){
        item.rowspan = 2; // or 0, 1, 2, 3...
    }
});

Вот планкер.

person s.alem    schedule 14.10.2014
comment
Привет, можешь добавить plunkr, если не возражаешь. Также в моем случае, если я не контролирую ответ JSON с сервера, есть ли другие варианты? - person Mukun; 15.10.2014
comment
Привет, можно ли сделать диапазон строк для нескольких столбцов - person Mukun; 08.07.2015