过滤ng-repeat angularjs中的项目

时间:2015-02-01 18:06:59

标签: angularjs

我想创建一个过滤器来仅检索网址中的最后一位数字,例如team._links.team.href会返回一个网址,例如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>

CONTROLLER.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;
    });
  });

2 个答案:

答案 0 :(得分:2)

您可以在控制器上添加一个简单的功能,如下所示:

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

然后在你的重复中使用它:

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

Here's a fiddle

答案 1 :(得分:1)

一种方法是为此定义自己的filter。例如:

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

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

&#13;
&#13;
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"}
                         }
                       }                     
                     ];

});
&#13;
<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>  
&#13;
&#13;
&#13;