Question

我在Angular的一个页面需要一个基于步骤的方法。

更改步骤工作正常，但模型未更新（更改步骤时应更新并保持不变）

我做错了什么？

这是我的模板

    <div id="step2" ng-if="step == 2">Here is the second page</div>

    <div class="step" ng-click="setStep(1)">1</div>
    <div class="step" ng-click="setStep(2)">2</div>

angularjs脚本

$scope.name = "This is the name model";

$scope.step = 1;

$scope.setStep = function (step) {
    $scope.step = step;
}

最后是一个带有重现问题的JSFiddle：http://jsfiddle.net/cmSDg/

Answer 1

请尝试ng-show：

<div id="step1" ng-show="step == 1">
     <input ng-model="name" type="text" placeholder="Enter a name" />
</div>

<div id="step2" ng-show="step == 2">Here is the second page</div>

DEMO

有关详细信息：what is the difference between ng-if and ng-show/ng-hide

引自链接（也来自angular doc）

ngIf创建新范围。这个的一个重要含义是ngModel 在ngIf中用于绑定到定义的javascript原语在父范围内。在这种情况下，任何修改子范围内的变量将覆盖（隐藏）该值中的值父范围

您所做的任何修改都会更改此新范围的属性，但不会影响父范围。

Answer 2

这是一个scope问题...... ng-if指令创建新范围，表明您的模型未更新的原因......

如果您使用原始对象，那么子范围创建新实例而不是从父范围继承

将您的对象转换为这样的对象，它的工作方式与您想要的一样......

了解更多信息，请查看understanding $scope ...

此处更新JSFIDDLE ...

Angular页面步骤不更新模型

2 个答案: