angularjs - Anglurjs中动态字段的总和

Question

嗨，我有一个像这样的动态字段

<tr ng-repeat="category in staff_categories">
   <td>{{ category.name }}</td>
   <td><input type="text" ng-model="category.permanent"></td>
   <td><input type="text" ng-model="category.temp"></td>
</tr>

它按预期工作正常。它根据staff_categories 进行迭代。现在我想要用户输入的 category.permanent 和 category.temp 值的总计并将其放入文本框中。请帮忙

Total permanent:<input type="text">
Total Temp:<input type="text">

Answer 1

在控制器中创建一个函数，该函数将被调用并更新包含这些值总数的范围变量。

<tr ng-repeat="category in staff_categories">
   <td>{{ category.name }}</td>
   <td><input type="text" ng-model="category.permanent" ng-change="updatePermanentTotal()"></td>
   <td><input type="text" ng-model="category.temp" ng-change="updateTemp()"></td>
</tr>

控制器代码

$scope.permanentTotal = 0.0;
$scope.tempTotal = 0.0;

$scope.updatePermanentTotal = function(){
  $scope.permanentTotal = 0.0;

  angular.forEach($scope.staff_categories, function(value, key){
    if(!isNaN(parseInt(value.temp)){
       $scope.tempTotal = $scope.tempTotal + parseInt(value.temp);
      }
    })
}

$scope.updateTemp = function(){
      $scope.tempTotal = 0.0;

      angular.forEach($scope.staff_categories, function(value, key){
        $scope.tempTotal = $scope.tempTotal + parseInt(value.temp);
       })
    }

并将这两个总变量绑定到这样的两个输入。

Total permanent:<input type="text" ng-model="permanentTotal">
Total Temp:<input type="text" ng-model="tempTotal">

Answer 2

您可以使用一个函数并将参数传递给它。

显示总计

<p> Permanent Total: {{ getTotal(permanent) }}</p>
<p> Temp Total: {{ getTotal(temp) }}</p>

在控制器中

$scope.getTotal = function(category){
   var total = 0;
   if(category == 'permanent'){
      angular.forEach(staff_categories, function(item){
         total = total + parseInt(item.temp);
      });
   } else {
      angular.forEach(staff_categories, function(item){
         total = total + parseInt(item.permanent);
      });
   }
   return total;
}