Как получить значения текстового поля динамически с помощью AngularJS

Question

Я выполнил следующее руководство по добавлению двух значений в Angular; Addition of Two Numbers in AngularJS

Но теперь мне нужно суммировать значения динамического текстового поля внутри ng-repeat.

У меня есть следующий код

HTML код

...... 
     <table> 
      <tr> 
       <th>Name</th> 
       <th>Days</th> 
      </tr> 
      <tr ng-repeat="si in serImp"> 
       <td>{{si.Name}}</td> 
       <td><input type="number" ng-model="si.Days" /></td> 
      </tr> 
     </table> 
     ....... 
     <button ng-click="sum()">Calculate</button> 
     ....... 

JS код

......... 
     $scope.serImp = []; 
     $scope.serImp = data; 
       // here data is object contain multiple Name+Durations e.g. 
     /*data = 
     [0] 
    Name:"first" 
    Days: 1 
[1] 
    Name:"second" 
    Days: 2 
[2] 
    Name:"third" 
    Days: 3*/ 

     $scope.sum = function() { 
// sum code goes here 
    } 
    ........ 

Мой вопрос: Как я могу получить сумму значений/номера из ng-model = "si.Days"

Answer 1

Используйте сокращение, чтобы суммировать все дни. Когда вы изменяете значения с помощью ng-model, вы управляете массивом $scope.serImp. Затем вы можете использовать эти значения для вычисления суммы.

$scope.sum = function() { 
    return $scope.serImp.reduce(function(prv, cur) { 
     return prv.Days + cur.Days; 
    }); 
} 

Уменьшение принимает массив и сводит его к одному значению, применяя одну функцию ко всем ее элементам. В нашем случае просто просто складываются все дни.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 2

Я создам функцию, которая будет возвращать все дни всего & будет напрямую связываться с HTML

{{totalDays()}} 

Код

$scope.totalDays = function(){ 
    var totalDays = 0; 
    angular.forEach($scope.serImp, function(si){ 
    if(si.Days && !isNaN(si.Days)){ 
     totalDays += Number(si.Days); 
    } 
    }) 
}