select and ng-option filters

Question

Can anyone fine tune my filters? I have 3 ng-option directives that each filter from the one before. I got this working when the select elements were 'returning' an integer but I now need them bound to an object.

This is my setup:

formData.divisions = {'Open', 'Mixed'}
formData.teams =
    [{
        "id": 1,
        "division":"Open",
        "name":"Team 1"
    },{
        "id": 2,
        "division":"Open",
        "name":"Team 2"
    },{
        "id": 3,
        "division":"Mixed",
        "name":"Team 3"
    }]

<select
    ng-model="formData.division"
    ng-options="division for division in divisions"></select>

<select
    ng-model="formData.team"
    ng-options="team as team.name for team in teams track by team.id | filter:{division:formData.division}"></select>

<select
    ng-model="formData.opponent"
    ng-options="team as team.name for team in teams | filter:formData.division | filter:{team:'!'+formData.team}"></select>

It's the second and third select elements that aren't quite right. They're close I'm sure.

The 1st select simply lists the divisions.

The 2nd select wants to only list teams within the selected division.

The 3rd select wants to do the same as the 2nd but also don't show the selected team from the 2nd select.

Thanks!

Answer 1

So this works. Both the 2nd and 3rd select element are filtered by the 1st. The 3rd also filters out whatever was selected in the 2nd.

<select
    ng-model="formData.division"
    ng-options="division for division in divisions"></select>

<select
    ng-model="formData.team"
    ng-options="team as team.name for team in teams | filter:formData.division | track by team.id"></select>

<select
    ng-model="formData.opponent"
    ng-options="team as team.name for team in teams | filter:formData.division | filter:{id:'!'+formData.team.id} track by team.id"></select>

As a side note and possibly helpful to anyone else trying to do something similar. I wanted to pre-populate the options with what the user had selected at a previous visit. The object is cached. Something that helped me do this but also was a little troubling was 'track by'. This post helped https://coderwall.com/p/p-glog/angularjs-using-trackby-with-filters-in-an-ng-repeat