ng-models not updating with ng-show

Question

I have a web app I am creating, and on one page I have created a wizard like form for the user to fill out using ng-show an dhide.

<div ng-show="tab === 1">
    <input type="text" ng-model="mealName">
    <button ng-click="setTab(2)">Add Description</button>
</div>
<div ng-show="tab === 2">
    <input type="text" ng-model="mealDesc" >
    <button ng-click="setTab(3)">Add Macros</button>
</div>

This code is a snippet showing the idea, that each time the user clicks the button, its hides one div and shows the next. All this works fine, however the fields do not store the values that are entered for later use in functions

Anyone know why this would be happening?

score 0 · Answer 1 · answered Feb 17 '15 at 22:18

0

Set the ng-models to "meal.name" and "meal.desc" instead. If they aren't storing for later, they probably aren't storing at all, because ng-show should affect the variables themselves.

answered Feb 17 '15 at 22:18

Grant Fowler

106
3

so ng-show is the cause? why would changing the names to meal. fix this? – user3024827 Feb 17 '15 at 22:24
@user3024827 see http://stackoverflow.com/questions/17178943/does-my-ng-model-really-need-to-have-a-dot-to-avoid-child-scope-problems – Ian Roberts Feb 17 '15 at 22:42

ng-models not updating with ng-show

1 Answers1