when selecting second dropdown ng-model object return null

Issue

When I making dropdown selection, my ng-model object becomes null, not sure why.

Because it returns null I getting below error:

 TypeError: Cannot read properties of null (reading 'name')

My code

<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions()" ng-model="$ctrl.secondColumnOption"></select>
<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions()" ng-model="$ctrl.thirdColumnOption"> </select>


getAvailableColumnOptions(){
      return this.allAvailableColumnOptions.filter(x => x.name !== this.secondColumnOption.name && x.name !== this.thirdColumnOption.name && x.name !== this.fourthColumnOption.name);
}

Solution

That is because after selection getAvailableColumnOptions() will be fired. And there you are filtering datasource to exclude selected options. So now dropdown doesn't have an appropriate model in the datasource and ng-model will be cleared.

UPD:

<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions('secondColumnOption')" ng-model="$ctrl.secondColumnOption"></select>
<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions('thirdColumnOption')" ng-model="$ctrl.thirdColumnOption"> </select>


getAvailableColumnOptions(ignoreOption) {
  return this.allAvailableColumnOptions
    .filter(x => (ignoreOption === 'secondColumnOption' || x.name !== this.secondColumnOption.name)
      && (ignoreOption === 'thirdColumnOption' || x.name !== this.thirdColumnOption.name)
      && (ignoreOption === 'fourthColumnOption' || x.name !== this.fourthColumnOption.name)
    );
}

Answered By - Ruslan Lekhman