Угловая динамическая валидация, основанная на других данных

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 вы выполните проверку перед отправкой изменений.

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