一个表 tr 内的两个循环答案

【问题标题】：two loops inside one single table tr一个表 tr 内的两个循环
【发布时间】：2016-09-05 06:36:00
【问题描述】：

您好，我的一张桌子有以下代码：

<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 中创建 3 个 tds 而不是 1 个。我该如何解决这个问题，以便我将有一个等级为 1 的表和两个对应的 tds？提前致谢。

【问题讨论】：

为什么在表格中使用DIV标签？这是错误的。
因为这些值实际上是动态的
可以说，如果我删除所有 div，我会得到我的结果，但是条件的值来自另一个列表，我如何循环它以便条件具有值？
而不是DIV使用span。
基本上标准来自不同的列表。我想将它嵌套在主 for 循环中。这是主要问题

标签： python html angularjs django

【解决方案1】：

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

【讨论】：

【解决方案2】：

变化不大：

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

你不需要上面的行，因为你已经迭代了 sigrity

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

【讨论】：