AngularJS：从ng-repeat中计算项目小计的更优方案

嘿，从jQuery转到AngularJS确实得换个思路——毕竟Angular是数据驱动的，咱们别再盯着DOM元素薅数值了，直接从数据源入手会更优雅！下面给你几个贴合Angular理念的实现方法：

1. 基于数据属性过滤计算（最常用） #

假设你的表格数据存在$scope.items数组里，每个项包含数值和一个标记（比如是否要计入总计的isIncluded属性），咱们直接对数据做过滤再求和：

控制器代码 #

app.controller('TableCtrl', function($scope, $filter) {
  // 模拟你的表格数据
  $scope.items = [
    { id: 1, amount: 150, isIncluded: true },
    { id: 2, amount: 200, isIncluded: false },
    { id: 3, amount: 300, isIncluded: true },
    // 更多数据...
  ];

  // 计算部分行的总和
  $scope.calculatePartialTotal = function() {
    // 用Angular内置过滤器筛选出需要计入的项
    const filteredItems = $filter('filter')($scope.items, { isIncluded: true });
    // 累加数值
    return filteredItems.reduce((total, item) => total + item.amount, 0);
  };
});

表格HTML代码 #

<table>
  <tr ng-repeat="item in items">
    <td>{{ item.id }}</td>
    <td>${{ item.amount }}</td>
    <td>
      <!-- 双向绑定标记，勾选后自动更新总和 -->
      <input type="checkbox" ng-model="item.isIncluded">
    </td>
  </tr>
  <tr class="total-row">
    <td colspan="2">部分总计:</td>
    <td>${{ calculatePartialTotal() }}</td>
  </tr>
</table>

这个方法的好处是完全贴合Angular的MVVM模式——DOM只是数据的“投影”，你不用再像jQuery那样去$('.row').find('.amount')扒数值，改数据就自动更新视图，维护起来超省心。

2. 动态条件过滤（比如按类别/搜索结果） #

如果你的筛选条件是动态的（比如用户选类别、输入关键词），只需要把过滤条件绑定到$scope变量，再在计算函数里用它过滤：

// 控制器里加个动态过滤条件
$scope.selectedCategory = 'electronics';

$scope.calculatePartialTotal = function() {
  // 用数组原生filter方法自定义过滤逻辑
  const filteredItems = $scope.items.filter(item => item.category === $scope.selectedCategory);
  return filteredItems.reduce((total, item) => total + item.amount, 0);
};

然后在HTML里加个绑定条件的控件：

<select ng-model="selectedCategory">
  <option value="electronics">电子产品</option>
  <option value="clothing">服饰</option>
</select>

核心思路总结 #

和jQuery的DOM操作思路完全相反：AngularJS里数据是核心，DOM只是数据的展示层。你要做的不是“找DOM取数值”，而是“从数据里筛选出需要的项，再计算总和”——这样代码更清晰，也避免了DOM操作带来的各种坑（比如元素找不到、数值解析错误）。

内容的提问来源于stack exchange，提问作者Willians Martins