Hiding ng-hide class from angularJs while page render

Question

For some reason I can see the ng-hide class comes when the page render. I am making changes to the existing code. In my code there is no ng-hide.

Below are the HTML code.

 <div ng-show="SpecialConditionsForm.{{provider.authorisedPersonFullName}}.$dirty" ng-show="SpecialConditionForm.{{provider.authorisedPersonFullName}}.$error" class="control-label ng-show">
     <span ng-show="this.SpecialConditionsForm.{{ provider.authorisedPersonFullName }}.$invalid">Enter a name</span>
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonFullName}}.$error.required"></span>
 </div>
 <div ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhone}}.$invalid" class=" control-label">
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhone}}.$error.required"></span>
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhone}}.$error.maxlength">Max length: 10</span>
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhone}}.$error.pattern"> Allowed: Only Numbers</span>
 </div>
 <div ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhoneExt}}.$invalid" class=" control-label">
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhoneExt}}.$error.maxlength">Max length: 4</span>
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonPhoneExt}}.$error.pattern"> Allowed: Only Numbers</span>
 </div>
 <div ng-show="SpecialConditionsForm.{{provider.authorisedPersonEmail}}.$invalid" class="text-danger control-label">
    <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonEmail}}.$error.required">required</span>
    <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonEmail}}.$error.maxlength">Max length: 10</span>
 </div>

Is someone able to help?

are you sure you haven't hard coded class on angular template by mistake? — Gaurav Srivastava, Aug 22 '17 at 18:46
Yes that's because ng-show and ng-hide works that way. Data is still rendered in DOM. So better to use ng-if — jackD, Aug 22 '17 at 19:16

score 0 · Answer 1 · answered Aug 22 '17 at 20:31

First of all, your first element cannot have multiple ng-show tags. You can combine them using || or && operators.

 <div ng-show="SpecialConditionsForm.{{provider.authorisedPersonFullName}}.$dirty || SpecialConditionForm.{{provider.authorisedPersonFullName}}.$error" class="control-label ng-show">
     <span ng-show="this.SpecialConditionsForm.{{ provider.authorisedPersonFullName }}.$invalid">Enter a name</span>
     <span ng-show="SpecialConditionsForm.{{provider.authorisedPersonFullName}}.$error.required"></span>
 </div>

When ng-show operator is false, it adds ng-hide class to the element. This is why you are not seeing it in your code, only at runtime. Because there are no errors and your form is still pristine, your ng-show condition triggers the ng-hide class. Using ng-if comments out hidden elements in your dom instead of adding ng-hide class.

Check out this post that explains differences between show/hide and if https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide — Athanasios Babasidis, Aug 22 '17 at 20:36

Hiding ng-hide class from angularJs while page render

1 Answers1