下面的脚本显示了使用 ng-repeat
的商店购物车 . 对于数组中的每个元素,它显示项目名称,其数量和小计( product.price * product.quantity
) .
计算重复元素总价的最简单方法是什么?
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td></td> <!-- Here is the total value of my cart -->
</tr>
</table>
18 回答
采取Vaclav的答案并使其更像Angular:
这为您提供了访问嵌套和数组数据的好处:
在模板中
在控制器中
这也适用于过滤器和普通列表 . 首先要为列表中的所有值的总和创建一个新过滤器,并给出总量的总和的解决方案 . 在详细代码中检查它fiddler link .
检查这个Fiddle Link
很久以前意识到这个回答了,但想发布不提出的不同方法......
使用
ng-init
计算总数 . 这样,您不必迭代HTML并在控制器中迭代 . 在这种情况下,我认为这是一个更简洁/更简单的解决方案 . (如果计数逻辑更复杂,我肯定会建议将逻辑移动到控制器或服务中 . )当然,在您的控制器中,只需定义/初始化您的
Total
字段:您可以在
ng-repeat
内计算总数,如下:在这里查看结果:http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview
如果自动更新结果:http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview(谢谢 - VicJordan)
这是我的解决方案
甜美简单的自定义过滤器:
(但只与简单的值之和,而不是和产品相关,我已经编制了
sumProduct
过滤器并将其作为编辑添加到此帖子中) .JS小提琴
编辑:sumProduct
这是
sumProduct
过滤器,它接受任意数量的参数 . 作为参数,它接受来自输入数据的属性的名称,并且它可以处理嵌套属性(嵌套标记为点:property.nested
);传递零参数返回输入数据的长度 .
仅传递一个参数会返回该属性的简单值 .
传递更多参数会返回传递属性值的值乘积(属性的标量总和) .
这里是JS Fiddle和代码
JS小提琴
Simple Solution
这是一个简单的解决方案 . 无需额外的循环 .
HTML part
Script Part
另一种解决方法,从Vaclav的answer扩展到解决这个特定的计算 - 即每行的计算 .
要通过计算执行此操作,只需向范围添加计算功能,例如
您可以在HTML代码中使用
{{ datas|total:calcItemTotal|currency }}
. 这样做的好处是不会为每个摘要调用,因为它使用过滤器,可用于简单或复杂的总计 .JSFiddle
这是使用ng-repeat和ng-init来聚合所有值并使用item.total属性扩展模型的简单方法 .
ngInit指令为每个项调用set total函数 . 控制器中的setTotals函数计算每个项目总数 . 它还使用invoiceCount和invoiceTotal范围变量来聚合(总和)所有项目的数量和总计 .
有关更多信息和演示,请查看此链接:
http://www.ozkary.com/2015/06/angularjs-calculate-totals-using.html
我喜欢优雅的解决方案
In Template
In Controller
如果您使用的是ES2015(又名ES6)
您可以尝试使用角度js的服务,它已经为我工作..下面的代码片段
控制器代码:
服务代码:
您可以使用自定义角度过滤器,该过滤器将数据集对象数组和每个对象中的键相加 . 然后过滤器可以返回总和:
然后在您的表中汇总您可以使用的列:
这是我解决这个问题的方法:
脚本
reduce将针对products array中的每个产品执行 . 累加器是总累计量,currentValue是数组的当前元素,最后的0是初始值
我对RajaShilpa的答案进行了一些扩展 . 您可以使用以下语法:
这样您就可以访问对象的子对象 . 以下是过滤器的代码:
在HTML中
在javascript中
Huy Nguyen的回答几乎就在那里 . 要使其工作,请添加:
...到ng-init的行 . 列表总是有一个项目,因此Angular将重复该块一次 .
使用过滤的Zybnek演示可以通过添加以下内容来实现:
见http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview .
在阅读了这里的所有答案 - 如何汇总分组信息之后,我决定跳过它并加载一个SQL javascript库 . 我正在使用alasql,是的,它在加载时间上需要几秒钟,但在编码和调试中节省了无数时间,现在要分组和sum()我只是使用,
我知道这听起来像是对angular / js有点咆哮,但是30年前SQL解决了这个问题,我们不应该在浏览器中重新发明它 .