当前位置: 首页 > 面试题库 >

AngularJS行总和ng-repeat

顾嘉德
2023-03-14
问题内容

我使用ng-repeat在表中动态添加来自数组的行。

现在,我想获取每行所有总和的总和(group.sum * group.perc / 100.0)。我需要一个变量,因为我需要此值进行进一步的计算。谢谢

的HTML

<tr ng-repeat="group in groupsArr">                                         
  <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}</td>
</tr>

脚本

var taxTotals = 0;
var taxTotals = 
  for (i=0; i<group.length; i++) {
    taxTotal = taxTotal + group[i].taxes;    
};
console.log(taxTotals);
};

问题答案:

创建一个过滤器:

 app.filter('sumFilter', function() {
     return function(groups) {
         var taxTotals = 0;
         for (i=0; i<groups.length; i++) {
             taxTotal = taxTotal + groups[i].taxes;    
          };
         return taxTotals;
     };
 });

使用$ filter服务:

 app.controller('myController', function($scope, $filter) {
      $scope.groups = [...];

      var taxTotals = $filter('sumFilter')($scope.groups);
      console.log(taxTotals);
 });

在您的HTML中使用它:

<tr ng-repeat="group in groupsArr">                                         
    <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}    </td>
</tr>
 <tr>
      <b> Tax Totals: </b> {{ groupsArr | sumFilter | currency }}
 </tr>


 类似资料:
  • 问题内容: 以下脚本使用来显示购物车。对于数组中的每个元素,它都会显示项目名称,其数量和小计()。 计算重复元素总价的最简单方法是什么? 问题答案: 在模板中 在控制器中

  • 问题内容: 我正在尝试将$ sce.trustAsHtml()与ng- repeat中的对象属性一起使用。结果是HTML完全空白。不过,使用ngSanitize可以正确输出HTML。 顺便说一下,我正在使用AngularJS v1.3.0-beta.3。不知道是否有错误或我做错了什么。 问题答案: 您不能在表达式中使用(除非是的属性),因为表达式是在的上下文中求值的。 最干净的方法是使用。 第二种

  • 问题内容: 有时我看到但更多 在我已经用这似乎很清楚。但是..是为了什么? 它们之间有什么区别,在哪里使用什么? 问题答案: Angularjs使用规范化过程来进行指令名称/属性匹配。 从位于http://docs.angularjs.org/guide/directive的angularjs文档中。 部分匹配指令: 规范化过程如下: 从元素/属性的前面去除x-和data-。将:,-或_分隔的名称

  • 问题内容: 我想要一些有关将XML命名空间属性与angular结合使用的信息。 问题是angular附带了一些指令,用于在angular分析了表达式后处理诸如href和src之类的书写属性(否则浏览器将尝试将其加载为url) https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329

  • 问题内容: 嗨,我有一个简单的ng-repeat-start和end用例,并且工作正常,当我想添加一个内部ng-repeat时出现了问题。这是我的代码 内部ng-repeat到td元素中不起作用,在检查html源代码时看到ngRepeat注​​释,但未创建td元素。 我的丑陋的解决方法(假设我知道该向量的大小)是: 问题答案: 从那时起,我不确定是否使用角度1.1.6,并且在1.1.5或1.0.7

  • 问题内容: 任何人都可以为该JSFiddle提供正确的方法: JsFiddle链接 我正在尝试通过.class&#ID更改元素的类。 提前致谢 感谢tymeJV,新的JSFiddle: 解 问题答案: 正确的方法是根据切换变量使用,请考虑: CSS: JS: HTML: 通过根据变量(“ toggle”)是否为或分配引用的类(在上面为“红色”)来工作。