AngularJS动态设置ng-model：如何通过下拉值绑定对象属性

嘿，我完全懂你碰到的问题——AngularJS的ng-model并不支持直接在表达式里使用插值语法{{}}，这就是你尝试ng-model="o.boxes.{{selectedNumber}}[0]"没生效的核心原因。不过有两种简单靠谱的方式能实现你要的动态绑定效果：

方案1：使用方括号动态属性访问（最直接） #

在JavaScript里，访问对象属性有两种方式：点语法（obj.property）和方括号语法（obj[propertyName]）。后者刚好支持用变量作为属性名，完美适配你的场景。

你只需要把输入框的ng-model改成这样：

<input type="text" class="form-control" ng-model="o.boxes[selectedNumber][0]">

原理说明 #

当你的下拉框选中某个值（比如selectedNumber的值为"box1"），o.boxes[selectedNumber]就等价于o.boxes.box1，再加上[0]就和你原来的o.boxes.box1[0]完全一致了。

搭配下拉框的示例代码（假设你要展示o.boxes里所有属性的名称）：

<select ng-model="selectedNumber" 
        ng-options="boxKey for boxKey in Object.keys(o.boxes)">
</select>

方案2：通过控制器的getter/setter函数处理（适合复杂逻辑） #

如果你的场景后续需要添加更多逻辑判断，比如校验属性是否存在，可以在控制器里定义getter和setter函数，配合ng-model-options来实现绑定：

控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  // 假设你的o对象已经定义在$scope上
  $scope.o = {
    boxes: {
      box1: ['value1'],
      box2: ['value2']
    }
  };
  
  // 获取选中的box值
  $scope.getBoxValue = function() {
    if ($scope.selectedNumber && $scope.o.boxes[$scope.selectedNumber]) {
      return $scope.o.boxes[$scope.selectedNumber][0];
    }
    return '';
  };
  
  // 设置选中的box值
  $scope.setBoxValue = function(newValue) {
    if ($scope.selectedNumber && $scope.o.boxes[$scope.selectedNumber]) {
      $scope.o.boxes[$scope.selectedNumber][0] = newValue;
    }
  };
});

输入框代码 #

<input type="text" class="form-control" 
       ng-model="getBoxValue" 
       ng-model-options="{ getterSetter: true }">

这种方式的好处是把逻辑封装在控制器里，后续修改或扩展会更灵活。

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