Lyriene Lyriene -4 years ago 108
Javascript Question

Show div using Angular ng-show

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download