迭代几个ng模型

Question

我有一组ng-model元素，我想把所有的值加起来并显示出来。我的集合像这样

<div ng-app>
  <div ng-controller="SumApp" >
    <input ng-model='val1' type='number' ng-change='calculate()' ng-init='val1=0'/>
    <input ng-model='val2' type='number' ng-change='calculate()' ng-init='val2=0'/> 
    <input ng-model='val3' type='number' ng-change='calculate()' ng-init='val3=0'/>
    <input ng-model='val4' type='number' ng-change='calculate()' ng-init='val4=0'/>
    <div>{{sum}}</div>
  </div>
</div>

我的控制器是这样的

<script type="text/javascript">
function SumApp($scope) {
  $scope.sum = 0;
  $scope.calculate = function() {
     $scope.sum = $scope.val1+$scope.val2+$scope.val3+$scope.val4
  };
}
</script>

如html对于models是动态生成

问题是，如果有任何方法，我可以迭代通过一组元素ng-model 而不使用任何list在控制器定义本身 ?

Answer 1

随时知道输入的确切数量，可以很容易地使用循环将它们相加:

$scope.sum = 0;
$scope.numInputs = 5;
$scope.calculate = function() {
    var i;
    $scope.sum = 0;
    for(i = 0; i < $scope.numInputs; i++) {
        $scope.sum += parseInt($scope['val' + i], 10);
    }
};