angular.js：如果表达式为真，则删除 html 元素答案

【问题标题】：angular.js: remove html element if expression is trueangular.js：如果表达式为真，则删除 html 元素
【发布时间】：2015-11-25 14:05:34
【问题描述】：

我的控制器中有 Collection

$scope.EventMarketCollection = [
        {
            Id: 1,
            EventMarketName: 'Full Time Result',
            OddsKey: 108,
            EventMarketOutcomes: [
                {
                    Id: 1,
                    OutcomeName: '1',
                    Odd: 3.25,
                    SumStake: 10,
                    BetSlipCount: 2
                },
                {
                    Id: 2,
                    OutcomeName: 'X',
                    Odd: 2.05,
                    SumStake: 110,
                    BetSlipCount: 1
                },
                {
                    Id: 3,
                    OutcomeName: '2',
                    Odd: 1.50,
                    SumStake: 21,
                    BetSlipCount: 5
                }
            ]
        }
    ];

我必须像这样绘制 html 表格：

<style type="text/css">
  table td {
    text-align: center;
    vertical-align: middle;
  }
  </style>

<table border="1">
  <tbody>
    <tr>
      <td>Full Time Result</td>
      <td>Odd</td>
      <td>Odds Key</td>
      <td>Stake Sum</td>
      <td>BetSlip Count</td>
    </tr>
    <tr>
      <td>1</td>
      <td>3.25</td>
      <td rowspan="3">108</td>
      <td>10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>X</td>
      <td>2.05</td>
      <td>110</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1.50</td>
      <td>21</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

但是当我在做 angular ng-repeat 和 rowspan="something" 时，我无法删除额外的 <td> 标签，我的输出看起来像：

<table border="1">
      <tbody>
        <tr>
          <td>Full Time Result</td>
          <td>Odd</td>
          <td>Odds Key</td>
          <td>Stake Sum</td>
          <td>BetSlip Count</td>
        </tr>
        <tr>
          <td>1</td>
          <td>3.25</td>
          <td rowspan="3">108</td>
          <td>10</td>
          <td>2</td>
        </tr>
        <tr>
          <td>X</td>
          <td>2.05</td>
          <td rowspan="3">108</td>
          <td>110</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>1.50</td>
          <td rowspan="3">108</td>
          <td>21</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>

这是我的 ng-repeat 代码：

<table class="table table-bordered">
  <tbody ng-repeat="eventMarket in EventMarketCollection">
    <tr>
      <td>{{eventMarket.EventMarketName}}</td>
      <td>Odd</td>
      <td>Odds Key</td>
      <td>Stake Sum</td>
      <td>BetSlip Count</td>
    </tr>
    <tr ng-repeat="eventMarketOutcomeItem in eventMarket.EventMarketOutcomes">
      <td>{{eventMarketOutcomeItem.OutcomeName}}</td>
      <td>{{eventMarketOutcomeItem.Odd}}</td>
      <td rowspan="{{eventMarket.EventMarketOutcomes.length}}" >{{eventMarket.OddsKey}}</td>
      <td>{{eventMarketOutcomeItem.SumStake}}</td>
      <td>{{eventMarketOutcomeItem.BetSlipCount}}</td>
    </tr>
  </tbody>
</table>

更新：您可以看到输出图像我想要做什么以及它目前是如何工作的

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat html-table remove-if

【解决方案1】：

使用ngIf 仅在第一行添加元素：

<td ng-if="$index === 0" rowspan="{{...}}" >{{eventMarket.OddsKey}}</td>

您的示例应如下所示：

angular.module('app', []).controller('Ctrl', function($scope) {
  
  $scope.EventMarketCollection = [{
    Id: 1,
    EventMarketName: 'Full Time Result',
    OddsKey: 108,
    EventMarketOutcomes: [{
      Id: 1,
      OutcomeName: '1',
      Odd: 3.25,
      SumStake: 10,
      BetSlipCount: 2
    }, {
      Id: 2,
      OutcomeName: 'X',
      Odd: 2.05,
      SumStake: 110,
      BetSlipCount: 1
    }, {
      Id: 3,
      OutcomeName: '2',
      Odd: 1.50,
      SumStake: 21,
      BetSlipCount: 5
    }]
  }];

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl">
  <table class="table table-bordered">
    <tbody ng-repeat="eventMarket in EventMarketCollection">
      <tr>
        <td>{{eventMarket.EventMarketName}}</td>
        <td>Odd</td>
        <td>Odds Key</td>
        <td>Stake Sum</td>
        <td>BetSlip Count</td>
      </tr>
      <tr ng-repeat="eventMarketOutcomeItem in eventMarket.EventMarketOutcomes">
        <td>{{eventMarketOutcomeItem.OutcomeName}}</td>
        <td>{{eventMarketOutcomeItem.Odd}}</td>
        <td ng-if="$index === 0" rowspan="{{eventMarket.EventMarketOutcomes.length}}">{{eventMarket.OddsKey}}</td>
        <td>{{eventMarketOutcomeItem.SumStake}}</td>
        <td>{{eventMarketOutcomeItem.BetSlipCount}}</td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

在做rowspan时，必须删除下的所有标签，正是我想删除这些标签