javascript - AngularJS:ng-if 在 ng-repeat 之外中断 ng-repeat

Question

AngularJS 版本:1.3.8

JSFiddle: http://jsfiddle.net/uYFE9/4/

我一直在开发一个小的 AngularJS 应用程序，遇到了一些问题。我在页面上有一个 ng-repeat，它填写了一个表单的内容。表单中的项目数量由绑定(bind)到模型的下拉列表定义，并使用 ng-options 填充。像这样的东西:

<select id="testAmount" ng-model="selectedItem" ng-options="item.name for item in items"></select>

<form role="form" name="testForm" ng-if="!complete">
    <div ng-repeat="i in getNumber(selectedItem.number) track by $index">
        {{$index}}
    </div>
</form>

Complete 一开始设置为 false，点击 Next 按钮将切换 complete 并隐藏表单和下拉列表。 Back 按钮将返回 complete 并再次显示表单。

我遇到的问题是选择上的 ng-if(之前，我将表单包装在具有相同 的 div 中ng-if - 同样的问题)。当 select 下拉列表发生变化时，ng-repeat 不再更新。删除 select 上的 ng-if 会将 ng-repeat 恢复到工作状态。

我想知道我在处理这里的嵌套时是否有什么奇怪的地方，或者它是否真的是一个错误？您可以在上面链接的 JSFiddle 上对其进行测试。 $index 应该在下拉列表中打印的次数，但不是。

有趣的是 - 在我的本地机器上调试问题时，打开 FireBug 解决了这个问题。

Answer 1

这是因为 ng-if创建子作用域以及原型(prototype)继承如何与基元一起工作。在这种情况下，原语是 selectedItem您正在设置 <select> ，但实际上是在子作用域上设置的，并且遮蔽/隐藏了父作用域属性。

一般来说，您应该始终在 ng-model 中使用点 (.)小号:

$scope.selection = {selectedItem: undefined};

在 View 中:

<div ng-if="!complete">
  <select ng-model="selection.selectedItem" 
          ng-options="item.name for item in items"></select>
</div>