Html angularJs中的条件表行

我已经用JSON文件中的数据显示了一些表

<div class="inner">
    <div ng-controller="Picks">
        <element>
        <th><b></b></th>
        </element>
        <table id="myTable" class="tablesorter">
            <thead>

                <tr>
                    <th style="width: 70px">League</th>
                    <th style="width: 150px">Away<br>Home
                    </th>
                    <th style="width: 130px">Score</th>
                    <th style="width: 200px">Game Clock</th>
                    <th style="width: 200px">Wager</th>
                    <th style="width: 100px">Amount</th>
                    <th style="width: 100px">Odds</th>
                    <th style="width: 90px">Result</th>
                    <th style="width: 80px">Net</th>
                    <th style="width: 100px;">Game Date</th>
                </tr>
            </thead>

            <tr><td>&nbsp;</td></tr>
            <tbody ng:repeat="i in picks" style="height: 50px; left: 50px">
                <tr style="border-top: 1px solid #000; text-align:left">
                    <td rowspan="2" style="width: 70px">{{i.league}}</td>
                    <td style="width: 150px">{{i.teamName[0]}}</td>
                    <td style="width: 30px">{{i.teamScore[0]}}</td>
                    <td rowspan="2" style="width: 100px">{{i.quarter}}</td>
                    <td rowspan="2" style="width: 200px"><b>{{i.pick}}</b></td>
                    <td rowspan="2" style="width: 100px">{{i.units}} Unit(s)</td>
                    <td rowspan="2" style="width: 100px">{{i.odds}}</td>
                    <td rowspan="2" style="width: 80px">{{i.result}}</td>
                    <td rowspan="2" style="width: 80px">{{i.net | number}}
                        Unit(s)</td>
                    <td rowspan="2" style="width: 100px; text-align: center">{{i.time}}</td>
                </tr>

                <tr style="text-align:left">
                    <td style="width: 150px">{{i.teamName[1]}}</td>
                    <td style="width: 30px">{{i.teamScore[1]}}</td>
                </tr>


                <tr><td>&nbsp;</td></tr>
            </tbody>
        </table>
    </div>
</div>

现在我想做的是，如果json中存在pick2属性，那么创建另一个tr并显示一些信息

如何创建此条件HTML行

JSON如下所示，有时会有一个pick2和一个pick3。当它们存在时，我希望与该拾取相关联的单位2、odds2、结果2等显示在我的表格上：

---

实现这一点的一个方法是使用

ngIf

指令（）检查

pick2

您创建了两组不同的

，一组类似

，另一组类似

，以便在重复循环时，它可以决定要生成的

另一种方法是创建自定义指令，您可以将

pick2

作为自定义指令的输入参数，以生成适当的

标记。

    <tbody ng:repeat="i in picks" style="height: 50px; left: 50px">
            <tr style="border-top: 1px solid #000; text-align:left">
                ....
            </tr>
             <tr ng-show="i.pick2 !== '' && i.pick2 !== undefined && i.pick2 !== null">
              ...
           </tr>
  </tbody>

....
...

这样，您可以有条件地显示tr。

如果您有如下表结构：

<table>
    <thead>
        <tr>
           <th>Name</th>
           <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows">
            <td>{{row.name}}</td>
            <td>{{row.description}}</td>
        </tr>
    </tbody>
</table>

名称
描述
{{row.name}
{{row.description}}

如果希望根据给定的ngRepeat迭代中是否存在属性，有条件地显示另一行，那么我建议实现一个指令（smartRow），该指令检查属性并在属性存在时添加额外的行：

<table>
    <thead>
        <tr>
           <th>Name</th>
           <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows" smart-row="row">
            <td>{{row.name}}</td>
            <td>{{row.description}}</td>
        </tr>
    </tbody>
</table>

名称
描述
{{row.name}
{{row.description}}

指示

app.directive（'smartRow'，函数（$compile）{
返回{
限制：“A”，
转移：'元素'，
链接：函数（范围、元素、属性、ctrls、transcludeFn）{
var模型=范围$eval（属性smartRow）；
transcludeFn（功能（克隆）{
元素。之后（克隆）；
if（model.hasOwnProperty（'price'））{
var priceRow=角度元素（“”）；
克隆后（priceRow）；
$compile（priceRow）（范围）；
}
})
}
}
});

示例解决方案旨在演示您可以在自己的解决方案中使用的概念：

使用ngRepeat在数组模型上循环并输出HTML行元素

使用自定义指令有条件地检查属性，当属性存在时，在属性后面插入另一行元素（我的示例中的price行）。指令使用“元素”转换来实现这一点

使用

$compile

服务手动编译额外的行，并将其链接到由

ngRepeat

创建的子作用域。在我的示例中，我使用

priceRow

指令创建了一个

tr

行，将其插入DOM，然后手动编译并将其链接到正确的范围

---

这也会在每一组中重复tbody，这不太好

<table>
    <thead>
        <tr>
           <th>Name</th>
           <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows" smart-row="row">
            <td>{{row.name}}</td>
            <td>{{row.description}}</td>
        </tr>
    </tbody>
</table>

  app.directive('smartRow', function($compile) {
    return  {
      restrict: 'A',
      transclude: 'element',
      link: function(scope, element, attr, ctrls, transcludeFn) {
        var model = scope.$eval(attr.smartRow);
        transcludeFn(function(clone) {
          element.after(clone);
          if (model.hasOwnProperty('price')) {

             var priceRow = angular.element('<tr price-row="' + model.price + '"></tr>');
             clone.after(priceRow);
             $compile(priceRow)(scope);
          }
        })
      }
    }
  });