Question

AngularJS Verion： 1.3.8

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

我一直在研究一个小型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>

Complete在开头设置为false，点击Next按钮将切换complete并隐藏表单和下拉列表。然后，Back按钮将切换complete，然后再次显示该表单。

我遇到的问题是选择ng-if（以前，我的表单包含在div中ng-if - 同样的问题）。更改ng-repeat下拉列表后select不再更新。删除ng-if上的select会将ng-repeat恢复为正常工作状态。

我想知道我在这里做嵌套是否有些奇怪，或者它是否真的是一个错误？你可以在上面链接的JSFiddle上测试它。 $index应在下拉列表中打印多次，但不是。

有趣的是 - 在本地计算机上调试问题时，让FireBug打开就可以解决问题。

Answer 1

这是因为ng-if创建子范围以及原型继承如何与原语一起使用。在这种情况下，由selectedItem设置的原语<select>，但实际上是在子范围上设置，阴影/隐藏父范围属性。

通常，您应该始终使用带有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>

Answer 2

ng-if导致了一些范围问题（这与绑定混淆）。

这是一个updated jsfiddle，您可以将其用作解决方法。从本质上讲，这个示例包含了您想要隐藏的项目周围的另一个div。然后添加next函数，以便在将complete设置为true的点击期间影响相同的范围。

HTML：

<div ng-app="test">
    <div ng-controller="TestCtrl">
        <div ng-if="!complete">
            <div>
                <label for="testAmount">Amount:</label>
                <select id="testAmount" ng-model="selectedItem" ng-options="item.name for item in items"></select>
            </div>

            <form role="form" name="testForm">
                <div ng-repeat="i in getNumber(selectedItem.number) track by $index">
                    {{$index + 'hi'}}
                </div>
                <button class="btn btn-default" value="Next" title="Next" ng-click="next()">Next</button>
            </form>
        </div>

        <div ng-if="complete">

        </div>
    </div>
</div>

JS：

angular.module('test', [])
.controller('TestCtrl', function($scope) {
    $scope.complete = false;

    $scope.items = [
        { name: '2', number: 2 },
        { name: '3', number: 3 },
        { name: '4', number: 4 }
    ];

    $scope.selectedItem = $scope.items[0];

    $scope.getNumber = function (number) {
        return new Array(number);
    };

    $scope.next = function() {
      $scope.complete = true;  
    };
})

Answer 3

我认为问题出在ng中的select语句 - 如果selectedItem永远不会被设置。如果您只是不想显示该下拉菜单！完全将其更改为ng-show并且工作正常。

    <div ng-show="!complete">

至于为什么ng-model没有绑定在ng-if中，我真的不知道，但它确实有一些意义，因为你试图做一个有点棘手的条件绑定

AngularJS：ng-if外部ng-repeat中断ng-repeat

3 个答案: