ng-hide ng-show not working as it should

Question

I am building a quiz in angular and Im trying to show a button based on whether the quiz has started. User go to their users page when logged in, and when they havent started the quiz i want to show the "start quiz" button. During the quiz they can go their users page, but then only "resume quiz" should be visible.

As my final test I dumbed it down to this. In my controller I specifically declare:

vm.started = false;

Then in the html file I use this logic:

    <button ng-hide"reg.started" ng-click="reg.startQuiz()">Start quiz</button>
    <button ng-show"reg.started" ng-click="reg.resumeQuiz()">Resume quiz</button>

So you would assume, since started is set to false, only the start quiz button would show up. However, both buttons keep show up, and I cant seem to be able to fix it. When i do a console.log on vm.started it says false. The ng-click works fine. Using a function instead (returning a boolean) does not work either.

should it not be ``````. What happens if you ```console.log(reg.started)```? — Paul Fitzgerald, May 06 '15 at 23:00
I use the controllerAs syntax, so reg.started would return undefined. vm.started == reg.started in the view. — idontknow, May 06 '15 at 23:04
ah gotcha, I am not v familiar with controllerAs, just reading about it now. Just thought this may be the reason @idontknow — Paul Fitzgerald, May 06 '15 at 23:05

score 2 · Accepted Answer · answered May 06 '15 at 23:03

2

are you sure you didn't forget the "="?

<button ng-hide="reg.started" ng-click="reg.startQuiz()">Start quiz</button>
<button ng-show="reg.started" ng-click="reg.resumeQuiz()">Resume quiz</button>

answered May 06 '15 at 23:03

Martin E. Zulliger

849
5
13

Wow, im such an idiot, unbelievable. Yes, I forgot the = , sigh. Its working now properly – idontknow May 06 '15 at 23:05

ng-hide ng-show not working as it should

1 Answers1