Show Div Using Angular Ng-show

I'm havings some problems with ng-show and $pristine. Here is the code (also on CodePen):

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.

Solution 2:

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

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

Solution 3:

Change this

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

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

Solution 4:

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

Solution 5:

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