Question

嗨我的表格中有以下代码：

<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的问题是，它实际上是在tr而不是1中创建了3个tds。如何解决这个问题，以便我有一个排名为1的表和两个与之对应的tds？提前致谢。

Answer 1

几乎没有变化：

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

Answer 2

好吧，首先，我会改变你将数据保存在$ 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%}

如果出于某种原因你必须按原样保留$ scope，你可以改变你的模板：

{%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%}

一个表tr内的两个循环

2 个答案: