Question

我有一个包含类别下的金额的列表，如下所示

[{Category:'a',amount:0,sum:1000},
 {Category:'a',amount:300,sum:1000},
{Category:'b',amount:200,sum:2000},
{Category:'b',amount:500,sum:2000},
{Category:'b',amount:200,sum:2000}
]

此列表是动态生成的，即类别下可以包含任意数量的类别和金额。我使用ng-repeat列出了上述内容amount input box。现在我必须以这样的方式验证字段，即输入的总和应该等于给定的其他和明智的显示错误或加倍方框

Answer 1

假设您的类别对象数组在控制器中可用作$scope.categories，您可以添加一个观察程序。

$scope.$watch('categories', function(newValue, oldValue) {
    var sum = newValue.map(function(category) {
        return category.sum;
    });
}, true);

Answer 2

根据我的指示是编写验证的最佳位置，但在这种情况下，有多个输入框，所以最好在控制器中写入，或者如果你要在多个地方使用这个逻辑，只需将它放入服务。

假设您的输入框以下列方式与对象绑定 -

<input type="text" ng-model="amounts.amount1">
<input type="text" ng-model="amounts.amount2">
.
.
<input type="text" ng-model="amounts.amountN">

现在您可以将控制器放入控制器以验证总和或最终提交，您可以验证输入

让我们对最终提交进行验证

function validateInput(){
    var tempSum= 0;
    for(var i in scope.amounts){
      tempSum += scope.amounts[i].amount;
    }
    return tempSum >1000 ? false : true;
}


function submit(){

    if(validateInput()){
        //do something
    }
    else{
        alert('sum exceeds 1000');
    }
}

观察者应该是开发人员最不喜欢的，但如果您需要立即验证，您的代码应该是这样的

scope.$watch('amounts', function(){
    var tempSum= 0;
    for(var i in amounts){
        tempSum += amounts[i+1].amount;
    }
    return tempSum >1000 ? smFunctionToShowErrorOrDisableSubmitButton() : true;
 }, true);

Answer 3

文本框中的光标模糊，创建一个函数并调用它。 Fiddler Link

angular.module("sampleApp", []).controller("sampleController", function ($scope) {
    $scope.items = [
      {Category:'a',amount:0,sum:1000},
      {Category:'a',amount:300,sum:1000},
      {Category:'b',amount:200,sum:2000},
      {Category:'b',amount:500,sum:2000},
      {Category:'b',amount:200,sum:2000}
    ];
  
    $scope.errorLogs = [];
  
    $scope.totalAmount = function(item) {
    	var convertNumber = function (val1) {
      	return isNaN(parseInt(val1))? 0 : parseInt(val1);
      };
      
      var filterVal = _.filter($scope.items, function(value){
          return value.Category == item.Category
			});
     	var amount = _.reduce(filterVal, function(val1, val2) {       
          return convertNumber(val1.amount) + convertNumber(val2.amount);
			});
      return amount;
    };
  
    $scope.checkAmount = function (item) {      
      if($scope.totalAmount(item) > item.sum) {
        $scope.errorLogs.push(item);
      } else {
        var index = $scope.errorLogs.indexOf(item);
        if (index !== -1) {
          $scope.errorLogs.splice(index,1);
        }
      }
    };
});
</div>

如何验证AngularJS中的列表总和为特定值？

3 个答案: