Question

首先介绍我的表结构：

<div class="col-md-9">
            <table class="table table-bordered">
                <thead>
                    <tr>
                      <th>Date</th>
                      <th>Pair</th>
                      <th id="{{odds.id}}" ng-repeat="odds in list">{{odds.odd.name}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="match in matches ">
                        <td>{{match.sd | parseMomentDate}}</td>
                        <td>{{match.h}}-{{match.a}}</td>
                        <td>{{match.odds.drawNoBet.value}}<span ng-if="!match.drawNoBet.value">--</span></td>                   
                    </tr>
                </tbody>
            </table>
        </div>

我列出奇数名称，因此为元素设置id attr。

所以我的问题是如何填充表的其余部分，表数据基于表头的Id，每个表头都有基于该id填充的行和列？

我有下一个接收数据的结构：

   "id": 4413011,
            "sd": "2017-04-27T23:30:00.000+0400",
            "h": "Athletic Bilbao",
            "a": "Betis Sevilla",
            "odds": {
                "bothToScore": [
                    {
                        "name": "no",
                        "value": 1.85,
                        "id": 552240303
                    },
                    {
                        "name": "yes",
                        "value": 1.95,
                        "id": 552240338
                    }
                ],
                "doubleChance": [
                    {
                        "name": "12",
                        "value": 1.22,
                        "id": 552240012
                    },
                    {
                        "name": "x2",
                        "value": 2.98,
                        "id": 552240003
                    },
                    {
                        "name": "1x",
                        "value": 1.11,
                        "id": 552240079
                    }
                ],
                "drawNoBet": [
                    {
                        "name": "1",
                        "value": 1.15,
                        "id": 552240007
                    },
                    {
                        "name": "2",
                        "value": 6.15,
                        "id": 552240267
                    }
                ],
                "totalGoals": [
                    {
                        "name": "under",
                        "value": 2.15,
                        "id": 552235662
                    },
                    {
                        "name": "over",
                        "value": 1.7,
                        "id": 552235663
                    }
                ]
            }
        },

因此，例如在赔率对象中有一个列表＆＃34; bothToScore＆＃34;因此＆＃34; bothToScore＆＃34;是表头的id，并且基于该id需要填充其余列，意思是;是＆＃39;或者＆＃39;否＆＃39;。

有什么建议吗？

Answer 1

在这种情况下，不需要id映射 - 只需确保<th>和<tr> s的相同顺序：

＆＃13;

angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
    $scope.matches = [{
      "id": 4413011,
      "sd": "2017-04-27T23:30:00.000+0400",
      "h": "Athletic Bilbao",
      "a": "Betis Sevilla",
      "odds": {
        "bothToScore": [{
          "name": "no",
          "value": 1.85,
          "id": 552240303
        },
        {
          "name": "yes",
          "value": 1.95,
          "id": 552240338
        }],
        "doubleChance": [{
          "name": "12",
          "value": 1.22,
          "id": 552240012
        },
        {
          "name": "x2",
          "value": 2.98,
          "id": 552240003
        },
        {
          "name": "1x",
          "value": 1.11,
          "id": 552240079
        }],
        "drawNoBet": [{
          "name": "1",
          "value": 1.15,
          "id": 552240007
        },
        {
          "name": "2",
          "value": 6.15,
          "id": 552240267
        }],
        "totalGoals": [{
          "name": "under",
          "value": 2.15,
          "id": 552235662
        },
        {
          "name": "over",
          "value": 1.7,
          "id": 552235663
        }]
      }
    }];
    $scope.matches.push(JSON.parse(JSON.stringify($scope.matches[0])));
}]);

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Pair</th>
        <th ng-repeat-start='(key, value) in matches[0].odds' hidden></th>
        <th ng-repeat-end ng-repeat='item in value'>{{item.name}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='match in matches'>
        <td>{{match.sd | date}}</td>
        <td>{{match.h}} - {{match.a}}</td>
        <td ng-repeat-start='(key, value) in match.odds' hidden></td>
        <td ng-repeat-end ng-repeat='item in value'>{{item.value}}</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

基于动态创建的头文件AngularJs填充表

1 个答案: