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

基于其他数据的角度动态验证

1 个答案: