Угловые шаги страницы не обновляют модель

Для одной из моих страниц в 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/


javascript html angularjs
person Patrick Reck    schedule 15.03.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вместо этого попробуйте 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>

ДЕМО

Для получения дополнительной информации: в чем разница между ng-if и ng-show/ng-hide

Цитата из ссылки (также из angular doc)

ngIf создает новую область. Важным следствием этого является то, что ngModel используется в ngIf для привязки к примитиву javascript, определенному в родительской области. В этом случае любые изменения, внесенные в переменную в дочерней области, переопределяют (скрывают) значение в родительской области.

Любые изменения, которые вы делаете, изменяют свойство этой новой области, которая не влияет на родительскую область.

person Khanh TO    schedule 15.03.2014

arrow_upward
0
arrow_downward

это проблема scope... директива ng-if создает новую область, поэтому ваша модель не обновляется...

если вы используете примитивный объект, как вы использовали там дочернюю область, создайте новый экземпляр вместо наследования от родительской области

преобразуйте свой объект в такой объект, и он работает так, как вы хотите...

для получения дополнительной информации см. понимание $scope...

и вот обновленный JSFIDDLE...

person Poyraz Yilmaz    schedule 15.03.2014