选择第二个AngularJS下拉框时ng-model返回null且报name属性读取错误

报错原因 #

你触发的空值读取报错是因为getAvailableColumnOptions方法里直接读取了secondColumnOption、thirdColumnOption、fourthColumnOption的name属性，一旦这几个变量为null，就会直接抛出类型错误。

ngModel被自动设为null的根因 #

AngularJS的ng-options有内置逻辑：如果当前绑定的ngModel值不在返回的选项列表内，就会自动把ngModel赋值为null。你现在两个下拉框共用同一个过滤方法，过滤规则会把所有已选中的选项都排除，这就导致当前下拉框自己选中的选项也被过滤出了列表，触发了自动置空的逻辑。

修复方案 #

1. 先修复空值访问报错，调整过滤逻辑，访问属性前先判断变量是否存在：

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

2. 再修复选项过滤导致的ngModel自动置空问题，给不同下拉框加标识，过滤时保留当前下拉框自身选中的值：
   修改模板代码，给方法传入当前下拉框的标识：

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

修改过滤方法逻辑：

getAvailableColumnOptions(currentField){
  return this.allAvailableColumnOptions.filter(x => {
    const excludeSecond = currentField !== 'second' && this.secondColumnOption && x.name === this.secondColumnOption.name;
    const excludeThird = currentField !== 'third' && this.thirdColumnOption && x.name === this.thirdColumnOption.name;
    const excludeFourth = currentField !== 'fourth' && this.fourthColumnOption && x.name === this.fourthColumnOption.name;
    return !excludeSecond && !excludeThird && !excludeFourth;
  });
}

调整后过滤逻辑只会排除其他下拉框选中的选项，不会过滤当前下拉框自身选中的内容，就不会再出现ngModel被自动置为null的问题。

内容的提问来源于stack exchange，提问作者mtkilic