Filtering in angularJS by arrays atributtes

Question

I'm building a web app and I'm using AngularJS for the front-end. I have a problem when I try to filter some selects.

This is my case:

I have an object called 'Games'. It represents football games.

Games have two atributtes: id as an identifier and Team. Team is a 'Teams' array. Now I will explain how is each Team.

A team has three attributes: id, name and League, all of them represent a League.

A League has two attributes: id and name.

I want to fill a select with Games and I want to filter this select by League. The problem is that the League is into each Team and when I try to do a filter like this: filter:{Team[0].League.id : 1} it is not working and I don't know why.

I have made an example on fiddle:

<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
    <select ng-model="newGame" ng-options="game.Team[0].name + ' vs ' + game.Team[1].name  for game in Games | filter:{Team[0].League.Name : 'League spain'}"></select>
    <select ng-model="teamsNewGame"    ng-options="team.name for team in Teams | filter:{}"></select>

</fieldset>

function TodoCtrl($scope) {
    $scope.LeagueSpain = { id: 1,
                    name: 'League spain'};
    $scope.LeagueUK = { id: 2,
                    name: 'League UK'};

    $scope.TeamBarcelona = {id:1,
                             name: 'Barcelona',
                             League: LeagueSpain};

    $scope.TeamMadrid = {id:2,
                          name:'Madrid',
                          League: LeagueSpain};

    $scope.TeamChelsea = {id:3,
                            name:'Chelsea',
                            League: LeagueUK};

    $scope.TeamArsenal = {id:4,
                            name:'Arsenal',
                            League: LeagueUK};

    $scope.Teams = [TeamBarcelona, TeamMadrid, TeamChelsea,
                   TeamArsenal];                        

    $scope.Games = [{id: 1, 
                    Team:[TeamBarcelona, 
                            TeamMadrid]
                         },
              {id: 2,
                    Team:[TeamChelsea, 
                    TeamArsenal]                            }                       
     ];

}

http://jsfiddle.net/vqzj37ys/1/

Edit: the second filter is empty because I don't know how to filter teams that are in the game.Team array

Could you provide a jsfiddle without filtering but at least showing something, with the proper module and controller instanciated? — floribon, May 27 '15 at 21:24
You can't declare a filter {Team[0].League.Name : 'League spain'} since it's merely an object and your property name is incorrect. Consider using custom filters (e.g. with different scenario but similar solution http://stackoverflow.com/questions/22024631/angularjs-filter-based-on-array-of-strings) — Igor Popov, May 27 '15 at 21:29

Filtering in angularJS by arrays atributtes

0 Answers0