Filter dropdown with ng-options from ng-options selection

Question

I am trying to filter an ng-options dropdown depending of what you select in the previous one. This is what I am trying to achieve

If you choose Internal Tier 1 then show all Branding Tiers

If you choose Internal Tier 2 show all Branding Tiers > 1

If you choose Internal Tier 3 show Branding Tier 3b

This is my actual code.

$scope.lookUps = {
    companyTier: [
        { Id: 1, Name: '1 - Partner Branded'},
        { Id: 2, Name: '2 - Co-branded'},
        { Id: 3, Name: '3a - Answer Branded'},
        { Id: 4, Name: '3b - Answer Branded'}
    ],
    internalTier: [
        { Id: 1, Name: 'Tier 1' },
        { Id: 2, Name: 'Tier 2' },
        { Id: 3, Name: 'Tier 3' }
    ]
};

And these are the dropdowns

<select class="form-control" name="companyinternaltier" 
ng-required="true" ng-model="companyData.InternalTierId" 
ng-options="item.Id as item.Name for item in lookUps.internalTier">          
<option value="">- Select Internal Tier Level -</option>

<select class="form-control" name="companytier" ng-required="true" 
ng-model="companyData.Category" ng-options="item.Id as item.Name for
item in lookUps.companyTier | filter: filterTiers()"> 
<option value="">- Select Branding Tier Level -</option></select>

I put filterTiers() function after the filter word because I think I could create a function to do that but I dont know how to handle it

I appreciate any kind of help. Thanks

Answer 1

On:

<select class="form-control" name="companyinternaltier" 
ng-required="true" ng-model="companyData.InternalTierId" 
ng-options="item.Id as item.Name for item in lookUps.internalTier">          
<option value="">- Select Internal Tier Level -</option>

it seems that you already have where to store the selected value.

ng-model="companyData.InternalTierId"

What I'll do in the controller is:

First:

separate the companyTier's object:

companyTier: [
        { Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
        { Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
        { Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
        { Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
    ]

Then:

Add the function to filter the objects.

$scope.filterTiers = function(companyTier) {
    return (companyTier.VisibilityRange >= companyData.InternalTierId );
};

Controller will look like this after changes:

$scope.lookUps = {
    companyTier: [
            { Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
            { Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
            { Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
            { Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
        ],
    internalTier: [
        { Id: 1, Name: 'Tier 1' },
        { Id: 2, Name: 'Tier 2' },
        { Id: 3, Name: 'Tier 3' }
    ]
};

$scope.filterTiers = function(companyTier) {
    return (companyTier.VisibilityRange >= companyData.InternalTierId );
};

And the view something like this:

<select class="form-control" name="companyinternaltier" 
ng-required="true" ng-model="companyData.InternalTierId" 
ng-options="item.Id as item.Name for item in lookUps.internalTier">          
<option value="">- Select Internal Tier Level -</option></select>

<select class="form-control" name="companytier" ng-required="true" 
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)"> 
<option value="">- Select Branding Tier Level -</option></select>