javascript - 使用 angularjs 渲染表格

Question

我有一个如下所示的 json 数组

[{"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Barcelona (VS) Manchester City","score":"4-0"},{"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Bayern Munchen (VS) PSV Eindhoven","score":"4-1"},{"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Feyenoord (VS) Zorya Luhansk","score":"1-0"},{"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Manchester United (VS) Fenerbahce","score":"4-1"},{"league_id":"1980","league_name":"England - Premier League","event_name":"Liverpool (VS) Manchester United","score":"0-0"},{"league_id":"1980","league_name":"England - Premier League","event_name":"Bournemouth AFC (VS) Tottenham Hotspur","score":"0-0"}]

I want to render this json as table like below by using angularjs ng-repeat

<table>
	<tr>
		<th>Event</th>
		<th>Score</th>
	</tr>
	<tr>
		<td colspan="2">UEFA - Champions League</td>
	</tr>
	<tr>
		<td>Barcelona (VS) Manchester City</td>
		<td>4-0</td>
	</tr>
	<tr>
		<td>Bayern Munchen (VS) PSV Eindhoven</td>
		<td>4-1</td>
	</tr>
	<tr>
		<td colspan="2">UEFA - Europa League</td>
	</tr>
	<tr>
		<td>Feyenoord (VS) Zorya Luhansk</td>
		<td>1-0</td>
	</tr>
	<tr>
		<td>Manchester United (VS) Fenerbahce</td>
		<td>4-1</td>
	</tr>
	<tr>
		<td colspan="2">England - Premier League</td>
	</tr>
	<tr>
		<td>Liverpool (VS) Manchester United</td>
		<td>0-0</td>
	</tr>
	<tr>
		<td>Bournemouth AFC (VS) Tottenham Hotspur</td>
		<td>0-0</td>
	</tr>
</table>

Answer 1

你可以简单地这样做。

var app = angular.module("sampleApp", []);

app.controller("sampleController", [
  "$scope",
  function($scope) {
    var data = [{
      "league_id": "2627",
      "league_name": "UEFA - Champions League",
      "event_name": "Barcelona (VS) Manchester City",
      "score": "4-0"
    }, {
      "league_id": "2627",
      "league_name": "UEFA - Champions League",
      "event_name": "Bayern Munchen (VS) PSV Eindhoven",
      "score": "4-1"
    }, {
      "league_id": "2630",
      "league_name": "UEFA - Europa League",
      "event_name": "Feyenoord (VS) Zorya Luhansk",
      "score": "1-0"
    }, {
      "league_id": "2630",
      "league_name": "UEFA - Europa League",
      "event_name": "Manchester United (VS) Fenerbahce",
      "score": "4-1"
    }, {
      "league_id": "1980",
      "league_name": "England - Premier League",
      "event_name": "Liverpool (VS) Manchester United",
      "score": "0-0"
    }, {
      "league_id": "1980",
      "league_name": "England - Premier League",
      "event_name": "Bournemouth AFC (VS) Tottenham Hotspur",
      "score": "0-0"
    }];

    var leagues = {};
    data.forEach(function(obj) {
      var leagueName = obj.league_name;
      if (leagues[leagueName] === undefined) {
        leagues[leagueName] = [];
      }
      leagues[leagueName].push(obj);
    });

    $scope.leagues = leagues;
  }
]);

th {
  text-align: left;
}
table,
td,
th {
  border: 1px solid #adadad;
}
td[colspan] {
  background: #676767;
  color: white;
}
td:nth-child(2) {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table>
      <thead>
        <tr>
          <th>Event</th>
          <th>Score</th>
        </tr>
      </thead>
      <tbody ng-repeat="(key, value) in leagues">
        <tr>
          <td colspan="2">
            {{key}}
          </td>
        </tr>
        <tr ng-repeat="rowData in value">
          <td>{{rowData.event_name}}
          </td>

          <td>{{rowData.score}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>