AngularJS ng-repeat内select绑定datatype时同步更新所有项的问题咨询

这个现象和AngularJS的ng-model绑定机制无关，核心是JavaScript引用类型的特性踩坑：

• 数组初始化的共享引用问题
  控制器里的new Array(2).fill({dataType: null})，执行逻辑是先创建1个独立的匿名对象{dataType: null}，再把这个对象的内存引用复制给数组的每一个索引位置。也就是说myCtrl.data[0]和myCtrl.data[1]并不是两个独立的对象，只是两个指向同一块内存地址的指针——修改任意一个索引下的对象属性，本质上都是修改同一块内存里的内容，自然会出现两个下拉框同步更新的现象。
• 属性拼写不一致的隐藏问题
  模板里ng-model绑定的是myCtrl.data[$index].datatype（属性名全小写datatype），但控制器初始化的对象属性是dataType（驼峰命名、中间T大写），两者属性名不匹配，初始状态下拉框根本读不到预定义的null值。只是因为共享引用的存在，修改时才刚好触发了统一更新的现象。

为什么直接绑定到myCtrl.data[$index]时功能正常？
这种绑定方式下，ng-model的修改是直接给数组对应索引重新赋值：比如选中后myCtrl.data[0] = 'VAL_1'，这个操作只是把数组索引0的指针从原来的共享对象，换成指向新的字符串值，并不会修改原来共享对象的内容，因此数组索引1依然指向原来的对象，自然不会出现同步变化。

• 避免用Array.fill()初始化包含对象的数组，给每个数组元素生成独立的对象实例。替代写法参考：

  // 每个索引对应独立的对象，不存在共享引用
  self.data = Array.from({ length: 2 }, () => ({ dataType: null }));
  

• 统一模板和控制器的属性命名，避免大小写不匹配导致的绑定失效问题。比如把模板里的datatype和控制器里的dataType统一成同一命名规则。
• 简化ng-repeat的绑定逻辑，不需要通过$index反向引用父作用域的数组，直接绑定循环迭代项即可：

  <div ng-repeat="i in myCtrl.data track by $index">
     <select
        ng-model="i.dataType"
        ng-options="item.value as item.label for item in myCtrl.detailTypes track by item.label"
     >
        <option value="" disabled selected>select an option</option>
     </select>
  </div>
  

  这种写法减少了不必要的作用域层级查找，也能避免索引写错导致的绑定错误。

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