Javascript AngularJS:ng如果外部ng重复中断ng重复

AngularJS Verion:1.3.8

JSFiddle:

我一直在开发一个小型AngularJS应用程序，但遇到了一些问题。我在一个页面上有一个

ng repeat

，用于填写表单的内容。表单中的项目数量由绑定到模型的下拉列表定义，并使用

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>

{{$index}}

Complete

在开始时设置为false，点击

Next

按钮将切换

Complete

并隐藏表单和下拉列表。然后，

Back

按钮将切换

complete

Back，并再次显示表单

我遇到的问题是select上的

ng if

（之前，我将表单包装在

div

中，具有相同的

ng if

-相同的问题）。更改

select

下拉列表时，

ng repeat

不再更新。如果在

选择

上删除

ng，则将
ng重复
恢复到工作状态

我想知道我在这里筑巢是有什么奇怪的地方，还是真的是一只虫子？您可以在上面链接的JSFIDLE上进行测试。
$index
应该在下拉列表中打印次数，但不是

有趣的是-在我的本地计算机上调试问题时，让FireBug打开修复了问题。
ng如果
导致了一些范围问题（这会干扰绑定）

这是一个你可以用来解决的问题。本质上，这个示例将另一个
div
封装在您希望最终隐藏的项目周围。然后添加一个
next
函数，以便在将
complete
设置为
true
的单击过程中影响相同的范围

HTML:

这是因为
ng if
创建了一个子作用域，以及原型继承如何处理原语。在这种情况下，原语是由
设置的
selectedItem
，但实际上是在子作用域上设置的，并且阴影/隐藏父作用域属性

一般情况下，您应始终将点（.）与
ng model
s一起使用：

$scope.selection = {selectedItem: undefined};

并且认为：

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

如果selectedItem从未设置，我相信问题在于ng中的select语句。如果你只是不想显示下拉时！将其完全更改为ng show，效果良好

    <div ng-show="!complete">



至于为什么ng模型没有被绑定到ng if中，我真的不知道，但它确实有一定的意义，因为您正在尝试执行一个有点扭曲的条件绑定
您的问题与使用ng if创建的子范围有关，并且缺少点规则。您可以通过设置
$scope.selected.item=$scope.items[0]来修复它并在选择时使用
ng model=“selected.item”
，然后相应地重复使用。是的，这就是问题所在。我不知道为什么我没有早点看到它。谢谢。它没有被绑定，因为
ng if
（不像
ng show
）创建了一个子作用域。正在设置
selectedItem
，但是在子作用域上。谢谢，这正是问题所在。因为某种原因，我根本没有想到。
<div ng-if="!complete">
  <select ng-model="selection.selectedItem" 
          ng-options="item.name for item in items"></select>
</div>

    <div ng-show="!complete">