Show div using Angular ng-show

Question

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

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

Gandalf the White · Accepted Answer · 2017-03-02T09:15:04.770

2

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.

edited Mar 02 '17 at 09:15

answered Feb 26 '16 at 20:01

Gandalf the White

2,415
2
18
39

thank you for your explanation! After I tried your method, the result was better than what I hope in the top – Lyriene Feb 27 '16 at 09:17
May I know why did you delete the recent question? – Praveen Kumar Purushothaman Mar 12 '16 at 09:59
It was very immature of me and was a low quality question. – Gandalf the White Mar 12 '16 at 10:04
@PraveenKumar I accept your claim and I am sorry for the same. Can you please give me the name of the other guy? I should not have done that but I can compensate for the same. – Gandalf the White Mar 12 '16 at 10:19
@GandalftheWhite Not sure buddy, in my answer, there *was* a comment, now gone, by someone named starting with `A`. Anyway, at least you understood what you caused. Thanks for that. `:)` – Praveen Kumar Purushothaman Mar 12 '16 at 10:20
@GandalftheWhite Tamil payyanaa nee? `:)` – Praveen Kumar Purushothaman Mar 12 '16 at 10:21
No Mate, let's delete the comments now ;) – Gandalf the White Mar 12 '16 at 10:37

score 1 · Answer 2 · answered Feb 26 '16 at 19:47

1

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

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

answered Feb 26 '16 at 19:47

Sushanth --

55,259
9
66
105

score 1 · Answer 3 · edited Feb 26 '16 at 22:18

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

More info about form controllers
Working codepen

@GáborCsikós it's working in the codepen I made. Check that you set a form name and use that name in the ng-show, or make a codepen to see what could be wrong. — Ariel, Sep 27 '16 at 15:26

score 0 · Answer 4 · answered Feb 26 '16 at 19:53

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}}" ...

score 0 · Answer 5 · answered Feb 26 '16 at 20:00

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

Show div using Angular ng-show

5 Answers5

Linked