filter an item within ng-repeat angularjs

Question

I want to create a filter to retrieve only the last digits from a URL, for example team._links.team.href gives back a URL such as http://api.football-data.org/alpha/teams/61 but I want only want it to give back 61. How could I do this?

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

possible duplicate of Retrieve last numbers from URL in JSON - angularjs app — ebo
– ebo, Commented Feb 1, 2015 at 18:35

James Waddington · Accepted Answer · 2015-02-01 18:35:51Z

2

You can add a simple function on the controller like this:

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

and then use it in your repeat:

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

Here's a fiddle.

answered Feb 1, 2015 at 18:35

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ebo · Accepted Answer · 2015-02-01 18:32:12Z

One way to go is to define your own filter for this. For example like this:

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

which then can be used like this:

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

A full code snippet is added below.

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>

Collectives™ on Stack Overflow

filter an item within ng-repeat angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related