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

Question

I have Collection in my controller 我的控制器中有收藏夹

$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
                }
            ]
        }
    ];

and I have to draw html table like this: 而且我必须像这样绘制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>

But when I am doing angular ng-repeat and rowspan="something", then I can not remove extra <td> tags, and my output looks like: 但是，当我做有角度的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>

here is my ng-repeat code: 这是我的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>

UPDATE: You can see images of output what I wan to do and how it works at the moment 更新：您可以看到输出图像，我现在想要做什么以及它如何工作

Answer 1

Use ngIf to add the element only on the first row: 使用ngIf仅将元素添加到第一行：

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

Your example should look like this: 您的示例应如下所示：

 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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-25 14:12:26

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-25 14:12:26

解决方案1
0 已采纳 2015-11-25 14:12:26