使用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"}
]

我想通过使用angularjs ng-repeat

将此json渲染为如下表所示

<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

你可以这样做。

＆＃13;

＆＃13;

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;
  }
]);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

执行此操作的一种方法是通过使用ng-repeat限制显示的项目，在ng-if中的每个其他项目上显示联盟名称：

注意：在不中继数组项顺序的情况下执行此操作的另一种方法是过滤数组本身并仅将"league_name"作为唯一数组项并将事件添加为而是改为数组。

＆＃13;

＆＃13;

var app = angular.module('app',[])

.controller('myController', ['$scope', function($scope){
  $scope.array = [
  {"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"}
  ];
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="myController">
    <table ng-repeat="item in array">
      <tr ng-if="$index == 0"> <!-- Headers only on first iteration -->
        <th>Event</th>
        <th>Score</th>
      </tr>
      <tr ng-if="$index % 2 == 0"> <!-- League name only on every other iteration-->
        <td colspan="2">{{item.league_name}}</td>
      </tr>
      <tr>
        <td>{{item.event_name}}</td>
        <td>{{item.score}}</td>
      </tr>
    </table>
  </div>
</body>

＆＃13;

＆＃13;

＆＃13;