获取JSON数组对象特定的Id,具体取决于我在AngularJS上单击的项目

时间:2016-09-23 08:06:42

标签: angularjs arrays json angularjs-scope angularjs-ng-repeat

所以我有一个包含团队列表的表格,我想要做的是当我点击一个团队名称时,它会显示一个包含团队详细信息的新视图。有2个控制器,1个获得联赛桌和固定装置,然后1个用于团队详细信息。到目前为止,我从联盟表中的控制器循环通过Json对象数组并得到一个链接列表,其中包含我需要传递给团队详细信息控制器的ID,以便我可以指定它应该显示哪个团队。因为团队在对象中没有ID,所以我必须这样做。

所以问题是我可以在console.log中记录所有ID,但它只传递记录的最后一个ID。哪个团队创建了同一个团队。我想获得我点击的团队的具体ID,并将其传递给团队详细信息控制器ID:。

我正处于学习阶段,请原谅我糟糕的代码:)。
如果您看到我的代码编写有任何改进,请告诉我。

我从以下网站获取数据:
 http://api.football-data.org/

使用AngularJs工厂库:
https://github.com/JohnnyTheTank/angular-footballdata-api-factory

视图

<tbody>
  <tr ng-repeat="team in teams.standing | filter:searchText | orderBy:orderByField:reverseSort">


    // Where i want to somehow click on a team name and load that teams details
    <td><a href="#!/teamDetails"><strong>{{ team.teamName }}</strong></a></td>
  </tr>
</tbody>

控制器1

.controller('AppCtrl', ['$scope', 'footballdataFactory',  function($scope, footballdataFactory) {
  $scope.date = new Date();
  var apiKey = '***********************';

  $scope.$back = function() {
    window.history.back();
  };

  $scope.leagueId = function(id) {
    $scope.id = id;

    footballdataFactory.getLeagueTableBySeason({
      id: $scope.id,
      apiKey: apiKey, // Register for a free api key: http://api.football-data.org/register
    }).success(function (data) {
      $scope.teams = data;
      $scope.leagueCaption = data.leagueCaption;

      console.log("Get League", $scope.teams);
      console.log('Loop through league and get team ids ----------------------------');
      $scope.getTeamId = function(teamId) {
        var dataLength = $scope.teams.standing.length;
        for(var tUrl = 0; tUrl < dataLength; tUrl++) {
          $scope.teamUrl = $scope.teams.standing[tUrl]._links.team.href.substr($scope.teams.standing[tUrl]._links.team.href.lastIndexOf('/') +1);
          console.log('teamId: ' + $scope.teamUrl);
        }
      }
    });
  };

  $scope.league = function(id) {
    $scope.id = id;
    footballdataFactory.getFixtures({
      league: $scope.id,
      apiKey: apiKey,
    }).success(function(data){
      $scope.games = data;
      console.log("getFixtures", $scope.games);
    });
  };
}])

控制器2

// Team details controller
.controller('TeamCtrl', ['$scope', 'footballdataFactory', function($scope, footballdataFactory) {
  var apiKey = '*************************';

  footballdataFactory.getTeam({
    id: $scope.teamUrl, ***Inserting the last 2 or 3 digits i get from the url***
    apiKey: apiKey,
  }).success(function(data){
    $scope.teams = data;
    $scope.name = data.name;
    $scope.crestUrl = data.crestUrl;
    $scope.squadMarketValue = data.squadMarketValue;
    console.log("getTeam", $scope.teams);
  });

  footballdataFactory.getPlayersByTeam({
    id: $scope.teamUrl,
    apiKey: apiKey,
  }).success(function(player){
    $scope.players = player.players;

    console.log("getPlayersByTeam", player);
  });
}])

1 个答案:

答案 0 :(得分:0)

您可以使用 apiNG football-data plugin 轻松解决此问题,它基于您甚至使用的相同角度库。在插件页面上是一个工作plnkr示例的链接