如何为ng-repeat生成的下拉框动态设置ng-model名称？

嘿，这个场景太常见了！你现在的代码里所有下拉框都绑定到了同一个floor和cubicle变量上，自然会出现“选一个所有框都跟着变”的问题。咱们可以通过两种简单的方式给每个下拉框分配独立的ng-model：

方法一：绑定到ng-repeat的数组元素上（推荐） #

既然你已经在循环popupArray里的ws对象，那直接给每个ws添加floor和cubicle属性就行，这样每个下拉框的选中值都会存在对应的数组元素里，互不干扰。

修改后的代码如下：

<tr ng-repeat="ws in popupArray track by $index">
  <td>
    <select class="form-control" 
            ng-model="ws.floor" 
            ng-options="item as item.floor for item in floors" 
            ng-click='onFloorChange(ws.floor)'>
      <option value="" selected="selected">Please select a floor</option>
    </select>
  </td>
  <td>
    <select class="form-control" 
            ng-model="ws.cubicle" 
            ng-options="item for item in cubicles">
      <option value="" selected="selected">...</option>
    </select>
  </td>
</tr>

这种方法的好处是数据结构更清晰，后续你要获取所有选中值的时候，直接遍历popupArray就能拿到每个行对应的floor和cubicle，处理起来非常方便。

方法二：用独立数组存储选中值 #

如果你不想修改popupArray里的对象结构，可以在控制器里定义两个数组，分别存储每一行的floor和cubicle选中值，利用$index来对应位置：

首先在控制器里添加：

$scope.selectedFloors = [];
$scope.selectedCubicles = [];

然后修改HTML里的ng-model：

<tr ng-repeat="ws in popupArray track by $index">
  <td>
    <select class="form-control" 
            ng-model="selectedFloors[$index]" 
            ng-options="item as item.floor for item in floors" 
            ng-click='onFloorChange(selectedFloors[$index])'>
      <option value="" selected="selected">Please select a floor</option>
    </select>
  </td>
  <td>
    <select class="form-control" 
            ng-model="selectedCubicles[$index]" 
            ng-options="item for item in cubicles">
      <option value="" selected="selected">...</option>
    </select>
  </td>
</tr>

这样每一行的下拉框都会绑定到数组对应索引的位置上，也能实现独立的选中状态。

另外要注意你原来的ng-click='onFloorChange(item.floor)'有个小问题：点击下拉框的时候item还没被选中，改成绑定后的变量（比如ws.floor或者selectedFloors[$index]）才能正确传递当前选中的楼层值哦。

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