Show div using Angular ng-show

Question

I'm havings some problems with ng-show and $pristine.

Here is the code (also on CodePen):

<blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine">
    <p>{{comment.rating}} Stars</p>
    <p>{{comment.comment}}</p>
    <footer>{{comment.author}}
</blockqoute>

When every field on the form has been filled, I want to show the div that contains my duplicate, but I want it to be hidden while some are still empty.

I tried to to use

!comment.[index].$pristine && ....

so when every field has been filled, the blockquote would become visible, but it didn't work.

Answer 1

Hey the way you are going the main problem will be that when the user will be filling any random data in the last text box, the moment he fills a letter the div will be visible to him - despite whatever improvements you make to the code.

What I'll suggest is - make use of ng-show="whatever" for that section that you want to show after the data has been filled.

In the beginning where your controller starts make it false $scope.whatever = false; and now it wont be visible to the user; when the user has filled all the text boxes call a trigger and check if the data is valid or not and then $scope.whatever=true; - Now your section will be visible.

To call the trigger you can do various things - you can make use of ng-change on the last textbox and there check values of all textboxes using their specific model name, I hope you know that.

Let me know if you want further clarification on this.

Answer 2

I believe you can specify ng-hide as a className to hide it by default.

<blockquote ng-show="whatever" class="ng-hide"