使用ngOptions/ngRepeat时选择列表为空，疑为Angular作用域问题求助

作为Angular新手遇到这种下拉框空数据的问题太正常了，我当初刚学的时候也踩过好几个类似的坑！既然你已经确认对象数组加载完成，那大概率是作用域继承细节或者指令语法疏漏导致的，结合你提到的「两处正常、一处异常」的情况，咱们拆解下常见原因和排查方法：

1. 先排查ngOptions/ngRepeat的语法正确性 #

很多时候空列表只是因为指令写法写错了，先核对最基础的语法：

• 用ngOptions的正确示例（假设你的数组是products，每个元素有id和name）：

  <select ng-model="selectedProduct" ng-options="p.id as p.name for p in products"></select>
  

  注意不要漏写in关键字，或者搞混变量名（比如数组实际是myProducts，模板里写成了products）。
• 用ngRepeat的正确写法（必须绑定在<option>标签上，不能直接绑在<select>上）：

  <select ng-model="selectedProduct">
    <option ng-repeat="p in products" value="{{p.id}}">{{p.name}}</option>
  </select>
  

2. 重点排查作用域继承的坑（新手高频踩雷点） #

Angular的作用域是原型继承机制，如果你异常的那处下拉框位于ng-if、ng-switch、ng-include这类会创建子作用域的指令内部，很容易出现「父作用域数组能读到，但绑定出问题」的情况：

• 反例（错误写法）：父控制器定义了$scope.selectedId = ''，下拉框在ng-if="isShow"里，此时子作用域会创建自己的selectedId变量，和父作用域的变量断开关联，看起来就像下拉框没数据。
• 修复方案：把ng-model绑定到对象的属性上，而不是原始类型变量。比如：
  控制器里：

  $scope.selected = { id: '' };
  $scope.products = [...] // 已加载的数组
  

  模板里：

  <div ng-if="isShow">
    <select ng-model="selected.id" ng-options="p.id as p.name for p in products"></select>
  </div>
  

  这样子作用域会继承父作用域的selected对象，修改的是对象的属性，不会出现变量隔离的问题。

另外还要注意控制器的绑定方式：如果异常的那处用了controllerAs语法（比如ng-controller="MyCtrl as vm"），但模板里还是写ng-options="p for p in products"，那应该改成vm.products才对！

3. 异步加载后的脏检查触发问题 #

虽然你说数组已加载，但如果是通过原生setTimeout、第三方库回调这类Angular上下文外的异步操作更新的数组，Angular不会自动触发脏检查更新视图：

• 错误写法：

  // 用原生setTimeout，Angular不知道数组更新了
  setTimeout(() => {
    $scope.products = [...];
  }, 1000);
  

• 正确写法：

  // 用Angular的$timeout自动触发脏检查
  $timeout(() => {
    $scope.products = [...];
  });
  // 或者手动触发脏检查
  $scope.$apply(() => {
    $scope.products = [...];
  });
  

4. 对比正常/异常代码的差异 #

既然你有两处正常的代码，直接对比这三处的差异就能快速定位问题：

• 检查DOM结构：异常的那处是不是包裹在ng-if/ng-switch这类子作用域指令里？
• 检查变量名：数组名、ng-model变量名是不是和正常的一致？
• 检查控制器绑定：是不是一处用了controllerAs另一处没用到？

给你个快速排查小技巧：在异常的下拉框旁边加个调试文本，比如{{products.length}}，如果显示0或者undefined，说明当前作用域找不到这个数组；如果显示正确的长度，那就是ngOptions/ngRepeat的语法问题。

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