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。当它们存在时，我喜欢与我的桌子上显示的那个选择相关联的units2，odds2，result2等：

Answer 1

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

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

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

使用ngRepeat循环遍历数组模型并输出HTML行元素
使用自定义指令有条件地检查属性，如果存在，则在其后插入另一个行元素（在我的示例中为价格行）。该指令使用＆＃39;元素＆＃39;为了达到这个目的，我们实现了这一目标
使用$compile服务手动编译额外行并将其链接到ngRepeat创建的子范围。在我的示例中，我使用tr指令创建了一个priceRow行，将其插入到DOM中，然后手动编译它并将其链接到正确的范围。

Answer 3

实现此目标的一个想法是使用ngIf指令（see here）来检查pick2

您创建了两组不同的<tr>，其中<tr ng-if="pick2">和<tr ng-if="!pick2">之类的内容，因此当您重新循环播放时，它可以决定生成哪个<tr>。

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

angularJs中的条件表行

3 个答案:

指令