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:
<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:
<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:
<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
Use ngIf
to add the element only on the first row:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.