AngularJS：如何为ng-model设置父作用域动态值？

嘿，我来帮你搞定这个动态绑定ng-model的需求！你想要让每个select的模型对应父作用域里像ot1、ot2这样的动态命名属性，同时保证每个组件独立工作。这里得先提一下AngularJS的作用域继承特性——直接绑定基本类型容易踩坑，用对象容器来管理会更稳妥。

步骤1：修改控制器，添加统一的存储对象 #

首先在父作用域里创建一个对象，用来存储每个加班项的选择值，这样我们可以用otid作为键来动态关联：

var overtimeapp = angular.module('overtime', []);
overtimeapp.controller('ctrlOvertime', function ($scope, $http) {
    $scope.overtimes = [{"otid" : "ot1"}, {"otid" : "ot2"}];
    $scope.overtimetypes = ['d', 'h', 'n', 's']; // 这里补了几个示例类型
    // 新增这个对象，专门存每个ot的选择值
    $scope.selectedOvertimes = {};
});

步骤2：模板里动态绑定ng-model #

在ng-repeat循环中，把ng-model绑定到这个对象的动态属性上。因为对象是引用类型，子作用域修改它的属性会直接同步到父作用域，完全不需要担心作用域遮蔽的问题：

<div ng-controller="ctrlOvertime">
  <!-- 循环生成每个select组件 -->
  <div ng-repeat="item in overtimes">
    <label>加班项 {{item.otid}}：</label>
    <select 
      ng-model="selectedOvertimes[item.otid]" 
      ng-options="type for type in overtimetypes"
    >
      <option value="">请选择类型</option>
    </select>
  </div>

  <!-- 测试父作用域是否能获取到值 -->
  <div>
    <p>ot1的选择结果：{{selectedOvertimes.ot1}}</p>
    <p>ot2的选择结果：{{selectedOvertimes.ot2}}</p>
  </div>
</div>

为什么推荐这种方式？ #

• 避免作用域坑：如果直接绑定$parent.ot1这种基本类型，子作用域在赋值时可能会创建自己的ot1属性，导致父作用域无法拿到最新值。用对象容器就不会有这个问题，因为我们修改的是对象的属性，不是重新赋值变量。
• 更清晰的管理：所有选择值都存在一个对象里，父作用域可以通过selectedOvertimes.ot1、selectedOvertimes.ot2轻松访问，后续扩展更多加班项也完全不用改逻辑。

如果你一定要绑定到$parent的单独属性 #

如果坚持要直接用$parent.ot1这种形式，模板也可以这么写，但我还是更推荐上面的对象方式：

<select 
  ng-model="$parent[item.otid]" 
  ng-options="type for type in overtimetypes"
>

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