他のデータに基づく角度の動的検証

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