CODEWITHSUNDEEP
javascriptangularjsng-showangularjs-ng-show
Lyriene
Lyriene

Reputation: 81

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.

Upvotes: 3

Views: 441

Answers (5)

Gandalf the White
Gandalf the White

Reputation: 2465

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.

Upvotes: 2

Ariel
Ariel

Reputation: 1527

Change this

<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>

To this 

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

Notice I'm using the form to check for the form properties, not the scope properties. Just change comment to commentForm (which is your form's name).

Upvotes: 1

Pablo Darde
Pablo Darde

Reputation: 6402

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

Upvotes: 0

Ivan Leonenko
Ivan Leonenko

Reputation: 2383

I would bind values of the form input to some variables in the controller, and on their ng-change="controller.validate()" run a validate code, so you can check if fields are not empty and input is correct and after that set isBlockquoteVisible variable, that would be in <blockquote ng-show="{{controller.isBlockquoteVisible}}" ...

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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

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

Upvotes: 1

Related Questions