Eckige dynamische Validierung basierend auf anderen Daten

Question

Ich habe eine ng-Wiederholung, die Daten und Eingaben ausspuckt, die vorgenommen werden können, um die Daten zu beheben. Wenn ein Teil jeder Wiederholung einen bestimmten Wert hat, muss ich einschränken, wie die Eingabe verwendet werden kann.

So gibt es zum Beispiel eine Liste der Ausrüstung, und für die Service-Art 1511 ist die maximale Menge 1. Sie müssen es beheben, und ich möchte sicherstellen, dass sie nicht eine ungültige Nummer eingeben Das wird zu einem anderen Problem führen.

Wie kann das gemacht werden?

edit: Aktualisierte Datei und unten Code, um nur die wiederholten Bits zu reduzieren.

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

Controller:

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

Hier ist eine einfache positive ganze Zahl Validierung auf Ihren Code. Ich habe kleine Änderungen an HTML und JS vorgenommen. Aber Sie müssen es an Ihre Bedürfnisse anpassen.

Die Idee ist, dass der Benutzer schließlich eine Art von Senden-Schaltfläche drücken wird, und diese Schaltfläche an ein ng-click-Ereignis angehängt ist. In diesem ng-click-Ereignishandler führen Sie die Überprüfung vor dem Senden von Änderungen durch.

Fiddle here

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"); 
    } 
    });