angularJs中的条件表行

Question

我有角度显示一些表格，其中包含来自 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>

function Picks($scope, $http) {
    $http.get('http://xxxxxxxx/Service/picks').
        success(function(data) {
            $scope.picks = data;
        });
}

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

如何创建这个条件 HTML 行？

JSON如下图所示，有时会有一个pick2，一个pick3。当它们存在时，我希望将与该选择相关的单位 2、赔率 2、结果 2 等显示在我的桌子上：

Answer 1

实现此目的的一个方法是使用 ngIf 指令 (see here) 来检查 pick2

您创建了两组不同的 <tr> 一组 <tr ng-if="pick2"> 和另一组 <tr ng-if="!pick2"> 这样当您 ngRepeat 循环时，它可以决定要生成哪个 <tr>。

另一种方法是创建一个自定义指令，您可以将pick2 视为自定义指令的输入参数，以生成适当的<tr> 标记。

Answer 2

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

Answer 3

Demo

如果你有这样的表结构：

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

并且您希望根据给定的 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>

指令

  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);
          }
        })
      }
    }
  });

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

1. 使用 ngRepeat 循环遍历您的数组模型并输出 HTML 行元素
2. 使用自定义指令有条件地检查属性，当它存在时，在其后插入另一个行元素（在我的示例中为价格行）。该指令使用“元素”嵌入来实现这一点。
3. 使用$compile 服务手动编译额外的行并将其链接到ngRepeat 创建的子范围。在我的示例中，我使用 priceRow 指令创建了一个 tr 行，将其插入到 DOM 中，然后手动编译它并将其链接到正确的范围。