[英]angular.js: remove html element if expression is true
我的控制器中有收藏夾
$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>
但是,當我做有角度的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>
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.