Angular page steps not updating model

Question

One of my pages in Angular are going to need a step based approach.

The changing steps is working fine, however the model is not updated (it should be updated and stay unmodified when changing steps)

What am I doing wrong?

Here's my template

    <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>

The angularjs script

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

$scope.step = 1;

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

And finally a JSFiddle with the reproduced problem: http://jsfiddle.net/cmSDg/

score 2 · Accepted Answer · edited May 23 '17 at 12:21

Try ng-show instead:

<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

For more information: what is the difference between ng-if and ng-show/ng-hide

Quoted from the link (also from angular doc)

ngIf creates new scope. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope

Any modifications you make change the property of this new scope which does not affect parent scope.

score 0 · Answer 2 · answered Mar 15 '14 at 13:19

it is a scope issue... ng-if directive creates a new scope that why your model is not updated...

if you use primitive object like you used there child scope create new instance instead of inherite from parent scope

convert your object to a object like this and it works like you want...

for more information look understanding $scope...

and here is updated JSFIDDLE...

Angular page steps not updating model

2 Answers2