过滤 ng-repeat AngularJS 中的项目

我想创建一个过滤器来仅从URL中检索最后一位数字，例如team._links.team.href返回一个URL，例如 http://api.football-data.org/alpha/teams/61，但我只想让它返回61。我该怎么做？

.HTML：

<tr ng-repeat="team in teamsList">
        <td>{{$index + 1}}</td>
        <td><a href="#/teams/{{team._links.team.href }}">
              {{team.teamName}}
              </a></td>
        <td>{{team.playedGames}}</td>
        <td>{{team.points}}</td>
        <td>{{team.goals}}</td>
        <td>{{team.goalsAgainst}}</td>
        <td>{{team.goalDifference}}</td>
      </tr>

控制器

.js

angular.module('PremierLeagueApp.controllers', []).
  controller('teamsController', function($scope, footballdataAPIservice) {
    $scope.teamsList = [];
    footballdataAPIservice.getTeams().success(function (response) {
        //Dig into the response to get the relevant data
        $scope.teamsList = response.standing;
    });
  });

您可以在控制器上添加一个简单的函数，如下所示：

$scope.teamID = function(url) {
    return url.substr(url.lastIndexOf('/') + 1);
};

然后在重复中使用它：

<a href="#/teams/{{teamID(team._links.team.href)}}">

这是一个小提琴。

一种方法是为此定义自己的过滤器。例如像这样：

.filter('idOnly', function() {
  return function(input) {
    return input.substring(input.lastIndexOf('/')+1)
  };
})

然后可以像这样使用：

<td>
  <a href="#/teams/{{team._links.team.href | idOnly }}">
              {{team.teamName}}
  </a>
</td>

下面添加了完整的代码片段。

angular.module('PremierLeagueApp', [])
.filter('idOnly', function() {
  return function(input) {
    return input.substring(input.lastIndexOf('/')+1)
  };
})
.controller('teamsController', function($scope) {
  $scope.teamsList = [ { teamName : 'team1',
                         playedGames : 1,
                         points: 0,
                         goals: 1,
                         goalsAgainst: 4,
                         goalsDifference: 3,
                         _links : {
                             team : { href : "http://api.football-data.org/alpha/teams/61"}
                         }
                       },
                       { teamName : 'team2',
                         playedGames : 1,
                         points: 3,
                         goals: 4,
                         goalsAgainst: 1,
                         goalsDifference: 3,
                         _links : {
                             team : {href : "http://api.football-data.org/alpha/teams/62"}
                         }
                       }                     
                     ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="PremierLeagueApp">
  
<div ng-controller="teamsController">{{aap}}
<table>
       <tr ng-repeat="team in teamsList">
        <td>{{$index + 1}}</td>
        <td><a href="#/teams/{{team._links.team.href | idOnly }}">
              {{team.teamName}}
              </a></td>
        <td>{{team.playedGames}}</td>
        <td>{{team.points}}</td>
        <td>{{team.goals}}</td>
        <td>{{team.goalsAgainst}}</td>
        <td>{{team.goalDifference}}</td>
      </tr>
</table>
</div>  
</body>

相关内容

最新更新

热门标签：