2016-05-10 3 views
0

Привет У меня есть следующий код для одного из моего стола:две петли внутри одной таблицы тр

<div class="col-md-4"> 
     <h2 align="center">Severity</h2> 
     <table class="table table-hover paleblue"> 
      <tr style="background-color: #eb0000; color:white"> 
       <th width="10px">Rank</th> 
       <th>Name</th> 
       <th>Criteria</th> 
      </tr> 
      {%verbatim%} 
       <tr ng-repeat="s in siverity track by $index"> 
        <td> 
         {{$index+1}} 
        </td> 

        <td> 
         <div ng-repeat="s in siverity" class="col-md-12" style="height:100px"> 
         {{s}}<br> 
         <textarea class="form-control">{{s}}</textarea> 
         </div> 
        </td> 

        <td> 
         <div ng-repeat="c in criteria" class="col-md-12" style="height:100px"> 
          {{c}}<br> 
         <textarea class="form-control">{{c}}</textarea> 
         </div> 
        </td> 
       </tr> 
      {%endverbatim%} 
     </table> 
    </div> 

сценарий:

$scope.siverity = ['A', 'B', 'C']; 
$scope.criteria = ['D', 'E', 'F']; 

Проблема с HTML, оно фактически создает 3 tds внутри tr вместо 1. Как я могу исправить это, чтобы у меня была таблица с рангом 1 и двумя tds, соответствующими этому? Заранее спасибо.

enter image description here

+0

Зачем использовать знак DIV в таблице? это неверно. –

+0

, потому что значения фактически динамические – vellattukudy

+0

позволяет сказать, что если я удалю все div, я получу свой результат, но значение критериев будет из другого списка, как я могу это сделать так, чтобы критерии имели значение? – vellattukudy

ответ

0

Ну, прежде всего я хотел бы изменить способ сохраняйте свои данные в $ scope. Если вы хотите что-то вроде

$scope.ranks = [{ 
    id: 1, 
    siverity: 'A', 
    criteria: 'D' 
}, { 
    id: 2, 
    siverity: 'B', 
    criteria: 'E' 
}, { 
    id: 3, 
    siverity: 'C', 
    criteria: 'F' 
}]; 

вы могли бы иметь шаблон быть:

{%verbatim%} 
<tr ng-repeat="rank in ranks"> 
    <td> 
    {{rank.id}} 
    </td> 

    <td> 
    <div class="col-md-12" style="height:100px"> 
    {{rank.siverity}}<br> 
    <textarea class="form-control">{{rank.siverity}}</textarea> 
    </div> 
    </td> 

    <td> 
    <div class="col-md-12" style="height:100px"> 
     {{rank.criteria}}<br> 
    <textarea class="form-control">{{rank.criteria}}</textarea> 
    </div> 
    </td> 
</tr> 
{%endverbatim%} 

Если по какой-либо причине вы должны держать $ сферу, как это, вы можете изменить свой шаблон например:

{%verbatim%} 
<tr ng-repeat="s in siverity track by $index"> 
    <td> 
    {{$index}} 
    </td> 

    <td> 
    <div class="col-md-12" style="height:100px"> 
    {{s}}<br> 
    <textarea class="form-control">{{s}}</textarea> 
    </div> 
    </td> 

    <td> 
    <div class="col-md-12" style="height:100px"> 
     {{criteria[$index]}}<br> 
    <textarea class="form-control">{{criteria[$index]}}</textarea> 
    </div> 
    </td> 
</tr> 
{%endverbatim%} 
0

Некоторые изменения:

<tr ng-repeat="s in siverity track by $index"> 
     <td> 
      {{$index+1}} 
     </td> 
     <td> 
      <div ng-repeat="s in siverity" class="col-md-12" style="height:100px" 

вам не нужно выше линии, так как вы уже переборе siverity

  {{s}}<br> 
      <textarea class="form-control">{{s}}</textarea> 
      </div> 
     </td> 

     <td> 
     <div ng-repeat="c in criteria" class="col-md-12" style="height:100px"> 
      {{c}}<br> 
       <textarea class="form-control">{{c}}</textarea> 
      </div> 
     </td> 
</tr> 
Смежные вопросы