AngularJS循环生成多选框时，ng-model绑定数组的写法是否正确？

首先说结论：你的写法技术上能让选择框绑定值，但不是最优方案，而且你测试用的{{area[1]}}没法正常工作，原因如下：

问题1：ng-model绑定的位置不合适 #

你把选中值直接绑定到了ng-repeat迭代的area对象自身（用area.areaId作为属性键），虽然能实现绑定，但会带来两个麻烦：

• 污染了原本的area数据结构，把选择结果和原始的区域信息混在一起，后续维护和数据收集会很麻烦；
• 只能在ng-repeat的子作用域里访问这个值，外部拿不到。

问题2：测试代码的错误 #

你写的<p>Area 1 {{area[1]}...</p>在ng-repeat外部是无效的——因为ng-repeat会为每个迭代项创建独立的子作用域，area这个变量只存在于子作用域中，父作用域（也就是外部）根本找不到它。

推荐的改进方案 #

在控制器里专门定义一个对象来存储所有选择结果，比如：

// 控制器里添加
$scope.selectedAreas = {};

然后修改HTML里的ng-model，把值绑定到这个全局对象上：

<div ng-repeat="area in areas">
  <label>{{area.areaName}} :</label>
  <select class="form-control" ng-model="selectedAreas[area.areaId]" ng-options="x for x in preferences">
  </select>
</div>

这样改了之后，你在任何地方（包括ng-repeat外部）都能轻松获取某个区域的选中值，比如测试代码可以写成：

<p>Area 1: {{selectedAreas[1]}}</p>

为什么这样更好？ #

• 数据职责分离：原始的areas数据只存区域信息，selectedAreas专门存选择结果，结构清晰；
• 全局可访问：不管是在ng-repeat内部还是外部，都能直接操作或读取选择结果，不用纠结作用域的问题；
• 后续提交表单时，直接把selectedAreas传给后端就行，不用遍历areas去提取值，效率更高。

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