基於其他數據的角度動態驗證

Question

我有一個ng-repeat，它吐出數據和可以用來修復數據的輸入。 如果每個重復的一部分具有特定值，則需要限制輸入的使用方式。

因此，例如，有一個設備列表，對於服務類型1511，最大數量為1。他們需要對其進行修復，我想確保他們輸入的數字不會是無效的，否則將導致另一個出現的問題。

如何才能做到這一點？

編輯：更新了jsfiddle及以下代碼，將其簡化為重復的位。

jsfiddle示例： https ：//jsfiddle.net/AKarstaedt/vfuj8sjt/

HTML：

<div ng-app="myApp" ng-controller="TaskActivityCtrl" class="container-fluid">
  <form novalidate name="taskActivityForm">
    <div class="row" data-ng-repeat="service in bill.services">
      <div data-ng-repeat="serviceCharge in service.serviceCharges">
        <div class="col-md-12 table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-3">Service Code</th>
                <th class="col-md-2">Attribute</th>
                <th class="col-md-2">Billed/Invoiced Value</th>
                <th class="col-md-5">Updated Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">{{ service.serviceCode }}
                </td>
                <td>Quantity</td>
                <td class="existQuantity">{{ serviceCharge.quantity }}</td>
                <td>
                    <input type="number" class="form-control" placeholder="New quantity" data-ng-model="serviceCharge.newQuantity" min="0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>

控制器：

 angular.module('myApp', [])
      .controller('TaskActivityCtrl', function($scope) {
        $scope.bill = {
          "services": [{
            "billableIndicator": true,
            "serviceCode": "1511",
            "serviceCharges": [{
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "988172"
              },
              "quantity": 2,
              "rate": 5000,
              "amount": 10000,
              "unitTypeCode": "PC",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }, {
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "90099"
              },
              "quantity": 1,
              "rate": 7888,
              "amount": 7888,
              "unitTypeCode": "PC",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }]
          }, {
            "billableIndicator": true,
            "serviceCode": "1530",
            "serviceCharges": [{
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "988172"
              },
              "quantity": 25,
              "rate": 200,
              "amount": 5000,
              "unitTypeCode": "PM",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }]
      }],
    }
  });

Answer 1

這是對代碼的簡單正整數驗證。 我對html和js做了些微更改。 但是您需要對其進行修改以適合您的需求。

這個想法是，用戶最終將按下某種“提交”按鈕，並且此按鈕附加到ng-click事件。 在此ng-click事件處理程序中，您將在提交更改之前執行驗證。

在這里擺弄

HTML：

<div ng-app="myApp" ng-controller="TaskActivityCtrl" class="container-fluid">
  <form novalidate name="taskActivityForm">
    <div class="row" data-ng-repeat="service in bill.services">
      <div data-ng-repeat="serviceCharge in service.serviceCharges">
        <div class="col-md-12 table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-3">Code</th>
                <th class="col-md-2">Attribute</th>
                <th class="col-md-2">Value</th>
                <th class="col-md-5">Updated Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">{{ service.serviceCode }}
                </td>
                <td>Quantity</td>
                <td class="existQuantity">{{ serviceCharge.quantity }}</td>
                <td>
                  <input type="number" class="form-control" placeholder="New quantity" data-ng-model="serviceCharge.newQuantity" min="0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <button ng-click="submitData()">
    Submit Changes
    </button>
  </form>
</div>

Javascript：

angular.module('myApp', [])
  .controller('TaskActivityCtrl', function($scope) {
    $scope.bill = {
                    "services": [{
                      "billableIndicator": true,
                      "serviceCode": "1511",
                      "serviceCharges": [{
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "988172"
                        },
                        "quantity": 2,
                        "rate": 5000,
                        "amount": 10000,
                        "unitTypeCode": "PC",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }, {
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "90099"
                        },
                        "quantity": 1,
                        "rate": 7888,
                        "amount": 7888,
                        "unitTypeCode": "PC",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }]
                    }, {
                      "billableIndicator": true,
                      "serviceCode": "1530",
                      "serviceCharges": [{
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "988172"
                        },
                        "quantity": 25,
                        "rate": 200,
                        "amount": 5000,
                        "unitTypeCode": "PM",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }]
                    }],
                  }

        $scope.submitData = function(){
        var isValid = true;
        for(var i in $scope.bill.services){   
        var service = $scope.bill.services[i];      
        for(var j in service.serviceCharges){
            var serviceCharge = service.serviceCharges[j];

          //check that newQuantity is a positive integer
          //if is positive integer
          alert(parseInt(serviceCharge.newQuantity) + " vs " + serviceCharge.newQuantity);
          if(parseInt(serviceCharge.newQuantity) == serviceCharge.newQuantity && 
              serviceCharge.newQuantity >= 0){
            //do nothing?
          } else {
            isValid = false;
            break;
          }
        }
        if(!isValid) break;
      }

      isValid? alert("values validated") : alert("validation failed");
    }
  });