ng-show不適用於類似的輸入字段之一

Question

我有一個多步驟表格。 我有ng-show，它取決於input [type =“ text”]是否為空。

現在，它適用於表單的一部分，但不適用於表單的另一部分。

<div id="wrapper-signup">
  <h1>Borrower Signup</h1>
  <p>Register and start borrowing money online.</p>

  <div class="element-wrap">
    <label>NAME<br>
      <div class="name-wrap">
        <input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
        <input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
      </div>
      <p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.firstname.$dirty && newuser.firstname.length ===  0">Firstname required</p>
      <p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.lastname.$dirty && newuser.lastname.length ===  0">Lastname required</p>
    </label><br>
  </div>
  <div class="element-wrap">
      <label for="email">EMAIL
        <div class="email-num-wrap">
          <span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
        </div>
        <p class="error" style="color: red; font-size: 0.9em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
      </label>
  </div>
  <div class="element-wrap">
    <label>MOBILE NUMBER
      <div class="email-num-wrap">
        <span class="awesome-icon"><i class="fa fa-mobile fa-lg mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile" ng-minlength="10" ng-maxlength ="10" value="" placeholder="Enter 10 digit number" required>
      </div>
      <p class="error" style="color: red; font-size: 1em;" ng-show="signForm.mobile.$dirty && (signForm.mobile.$error.minlength || singForm.mobile.$error.maxlength)">Please enter a 10 digit number</p>
    </label>
  </div>
  <div class="clear">
    &nbsp;
  </div>
  <div class="checkbox-wrap">
  <input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the <a href="#">Privacy Policy</a>, <a href="#">Terms of Use</a> and consent to Electronic Disclosures.</p>
  </div>
  <div class="checkbox-wrap">
    <input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
  </div>
  <a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck && signForm.mobile.$valid && newuser.firstname.length !== 0 && newuser.lastname.length !==  0 " class="submit-signup">SIGNUP</a>

</div>

它適用於上方視圖，但不適用於下方視圖

<div id="wrapper-identity">
    <p>Please enter the following details</p>
    <div class="aadhar-wrap">
        <label for="aadhar">Aadhar Card</label><br>
        <input type="text" name="aadhar" ng-model="newuser.aadhar" id="aadharN" value="" placeholder="Enter Aadhar Card No" required>
        <p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && newuser.aadhar.length === 0">Aadhar number required</p>
    </div>
    <div class="pan-wrap">
        <label for="pan">PAN</label><br>
        <input type="text" name="pan" ng-model="newuser.pan" value="" id="panN" placeholder="Enter PAN No" required>
        <p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && newuser.pan.length === 0">PAN number required</p>
    </div>
    <input type="submit" ng-hide="signForm.aadhar.$dirty && newuser.pan.length === 0 && signForm.pan.$dirty && newuser.aadhar.length === 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
</div>

我不想填充這個地方，因為css文件很大。

這是the人https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview

Answer 1

嘗試調查每種情況在每種情況下返回的值。

例如，嘗試在您的局部應用程序中使用它：

<p>
DEBUG: {{ signForm.aadhar.$dirty }} && {{ newuser.pan.length === 0 }} && {{ signForm.pan.$dirty }} && {{ newuser.aadhar.length === 0 }}
</p>

Answer 2

不檢查長度，而是檢查值newuser.pan

<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && !newuser.aadhar">Aadhar number required</p>

<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && !newuser.pan">PAN number required</p>

Answer 3

錯誤在於ng-hide表達式。 您應該使用ng-show，同時反轉長度控件：

 <input type="submit" ng-show="signForm.aadhar.$dirty && newuser.pan.length != 0 && signForm.pan.$dirty && newuser.aadhar.length != 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">

它控制兩個輸入是否都已更改，並且其中有一些值。 如果條件成立，則會顯示“提交”按鈕，否則將被隱藏。