AngularJS如何根据下拉选项动态修改ng-model绑定的目标属性？

问题原因 #

你尝试的两种写法都不生效是AngularJS的正常特性：

1. ng-model不支持双大括号插值语法，它要求传入一个可写的表达式，插值会提前把内容转为静态字符串，无法实现动态绑定
2. 你写的row.[x.Attribute]本身是非法的JS属性访问语法，就算修正为row[x.Attribute]也无法生效，因为x是ng-options循环内部的临时变量，ng-model的作用域无法读取到这个值

可行解决方案 #

最常用且无坑的方案是引入中间临时变量配合ng-change事件做值同步：

1. 修改HTML代码 #

<select 
  ng-model="selectedCustomer" 
  ng-options="x as x.Name for x in options.tableData.childCustomers"
  ng-change="syncToRow(selectedCustomer)"
>
</select>

这里我们把整个选中的childCustomers对象绑定到临时变量selectedCustomer上，选中变化时触发同步方法。

2. 控制器中加同步逻辑 #

$scope.syncToRow = function(selected) {
  if (!selected) return;
  // 直接动态赋值对应属性
  row[selected.Attribute] = selected.CustomerId;

  // 如果需要选中A时清空B、选中B时清空A，可以加下面两行
  // row[selected.Attribute === 'A' ? 'B' : 'A'] = null;
}

3. 回显处理 #

如果需要页面初始化时就显示已保存的值，可以在初始化逻辑中加对应赋值：

// 假设初始化时row.A或者row.B已有值
if (row.A) {
  $scope.selectedCustomer = $scope.options.tableData.childCustomers.find(item => item.CustomerId === row.A);
} else if (row.B) {
  $scope.selectedCustomer = $scope.options.tableData.childCustomers.find(item => item.CustomerId === row.B);
}

如果业务场景复杂有大量同类需求，可以进一步封装为自定义组件/指令复用逻辑。

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