angular.js: удалить элемент html, если выражение истинно

Question

angular.js: удалить элемент html, если выражение истинно

0

У меня есть коллекция в моем контроллере

$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 = "что-то", тогда я не могу удалить лишние теги <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>

ОБНОВЛЕНИЕ: вы можете видеть образы вывода, что я хочу делать и как он работает в данный момент

Arkadi 25 нояб. 2015, в 15:51

Источник

Теги:

javascript

angularjs

html-table

angularjs-ng-repeat

remove-if

1 ответ

Ещё вопросы

hansmaad · Accepted Answer · 2015-11-25T11-13-00.000Z

Используйте 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 необходимо удалить все теги <td> в разделе <td rowspan = "....">, именно я хочу удалить эти теги
@ Аркади ты пробовал? Должно сработать
@Arkadi Добавлен фрагмент рабочего кода.