javascript - 如何检查数字是否大于 ng-change 上的数字

Question

).

堆栈 Blitz :

请检查:https://stackblitz.com/edit/angularjs-vc9lg5

我有一个号码 Total expense和数据表。

有一列Amt .该列包含预付款，可以通过在 Amt 旁边的输入框中输入来扣除并支付到当期费用 (1000) .

正如您在第三列中看到的，我输入了 500，现在我可以在第一行输入 500(或者在第二行输入 100，在第一行输入 400)。

关于 ng-change输入框的 我通过计算 deductedTillNow 检查输入的金额是否大于可从总费用中扣除的余额和 balanceLeftInExpense .

您可以在 chrome 扩展中看到 $scope 的值变量 deductedTillNow和 balanceLeftInExpense在右侧。当我尝试通过输入 50 从第一行中扣除剩余的 500 时, balanceLeftInExpense变成 450。

所以我的验证不允许输入下一个数字，因为我尝试在 50 之后输入下一个数字, 0 , balanceLeftInExpense是450并且 500 大于 450。如何允许输入 500？

 //calculate amount till now
$scope.deductedTillNow = 0;
for (let j = 0; j < $scope.amountLedgerListArray.length; j++) {
   if($scope.amountLedgerListArray[j].adjustAmount){
    $scope.deductedTillNow = $scope.amountLedgerListArray[j].adjustAmount + $scope.deductedTillNow;
   }
}

//calculate balance left in expense

$scope.balanceLeftInExpense = $scope.totalExpenseAmount - $scope.deductedTillNow;

检查输入的金额是否大于 balanceLeftInExpense - 验证:

if(item.adjustAmount > $scope.balanceLeftInExpense){
  item.adjustAmount = item.adjustAmount.toString();
  item.adjustAmount = item.adjustAmount.substring(0, item.adjustAmount.length - 1);
  item.adjustAmount = parseInt(item.adjustAmount);
}

html:

    <table class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>Payment Ref no</th>
         <th>Date</th>
         <th>Amt</th>
         <th >Adjust amount</th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="item in amountLedgerListArray">
         <td>
            {{item.payment_ref_no}}
         </td>
         <td>
            {{item.payment_date}}
         </td>
         <td>
            {{item.amount}}
         </td>
         <td>
            <input type="number" name="sgst" class="form-control"
               ng-disabled="item.isDisabled" autocomplete="off"
               ng-change="calculateBalanceAndRestrict(item)"
               ng-class="{'borderRedError' : expense.$invalid}"
               ng-model="item.adjustAmount" onkeypress="limitKeyPress(this, 10, event)" />
         </td>
      </tr>
   </tbody>
</table>

编辑:Amt 列中的数据是已支付的 Advance 金额。现在有一笔费用(本例中为 1000。请参见屏幕截图 Total expense:1000)。我可以从 Amt 中的任何行中扣除柱子。

这里我从第三行扣除了500(现在余额:500)。我可以从前两行中扣除剩余的 500。来自第二行的 100(因为它只有 100)然后来自第一行的剩余 500 或来自第一行的剩余 500。

我这样验证:在更改输入框时，我检查输入的金额是否大于所有输入金额的总和(deductedTillNow)。当我现在开始在第一行打字时，就会计算费用中剩余的余额。当我输入 50 时，剩下的余额是 450(1000 - 500(第三行) + 50(第一行))。

当我在第一行剩余的 500 的 50 之后键入 0 时，剩余余额为 450。因此我的验证不允许这样做(键入的 500 大于 450)。我需要允许输入 500。

Answer 1

您代码中的主要问题是您错误地检查了余额

 if(item.adjustAmount > item.amount || (item.amount <= 0)){
      item.adjustAmount = null;
      return
    }

像这样扣完之后要查看余额

  $scope.balanceLeftInExpense = $scope.totalExpenseAmount - $scope.deductedTillNow;

  if ($scope.balanceLeftInExpense < 0) {
    item.adjustAmount = item.adjustAmount.toString();
    item.adjustAmount = item.adjustAmount.substring(0, item.adjustAmount.length - 1);
    item.adjustAmount = parseInt(item.adjustAmount);
  }

帐户禁用代码似乎也有问题，您需要检查每一行的数据你应该像这样检查每一行的费用

  //if amount entered is equal to advance paid of that row, enable others
  for (let i = 0; i < $scope.amountLedgerListArray.length; i++) {
    if (Number($scope.amountLedgerListArray[i].amount) < $scope.amountLedgerListArray[i].adjustAmount) {
      $scope.amountLedgerListArray[i].isDisabled = false;
    }
    else {         
        //disable those that dont have a value in it
        if ($scope.amountLedgerListArray[i].advance_id != item.advance_id && !$scope.amountLedgerListArray[i].adjustAmount && Number($scope.amountLedgerListArray[i].amount) < $scope.amountLedgerListArray[i].adjustAmount) {
          $scope.amountLedgerListArray[i].isDisabled = true;           

      }
    }
  }

Demo ，您不需要禁用文本框，因为您的支票不允许输入。