ページレンダリング中にangularJsからng-hideクラスを非表示にする

Question

何らかの理由で、ng-hideクラスがページのレンダリング時に表示されることがあります。私は既存のコードを変更しています。私のコードでは、ng-hideはありません。以下は

HTMLコードです。

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

誰かを助けることはできますか？

Answer 1

まず、最初の要素に複数のng-showタグを使用することはできません。あなたは||を使ってそれらを組み合わせることができますまたは& &オペレータ。

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

ng-show演算子がfalseの場合、ng-hideクラスが要素に追加されます。このため、実行時にのみコード内に表示されません。エラーはなく、フォームは元のままですので、ng-show条件でng-hideクラスがトリガーされます。 ng-hideを使用すると、ng-hideクラスを追加する代わりに、DOMの隠し要素をコメントアウトできます。