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 文件非常大。

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

错误在于 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">

它控制两个输入是否都已更改以及它们是否具有某些值。如果条件成立，提交按钮出现，否则隐藏。

Answer 3

不要检查长度，而是检查值 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>