嵌套ng-repeat [重复]的项目总和

问题描述 投票:0回答:3

这个问题在这里已有答案:

我想在ng-repeat中做一些计算,我想从列表中的每个嵌套的ng-repeat中得出总价。

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

    <div class="item" ng-repeat="item in items">
      <a>{{item.count}}</a>
      <a ng-init="setTotals(total = (item.count * item.price))">{{item.price}}</a>   
    </div>

  <div class=bottom">total price: {{totalPrice}}</div>

</div>

这是我试图获得的角度范围:

    $scope.setTotals = function (total) {
        $scope.totalPrice = total * total;
    }

但这只是单个项目输出的两倍,我怎样才能获得嵌套ng-repeat中所有项目的总数?

javascript angularjs
3个回答
0
投票

假设项目列表如下:

$scope.list = [
    {date: '2017-12-14', items: [
        {count: 3, price: 9},
        {count: 1, price: 20}
    ]},
    {date: '2017-12-15', items: [
        {count: 2, price: 10},
        {count: 5, price: 20}
    ]}
];

而且你想用函数计算每日价格总和:

$scope.calculateTotal = function (dayItems) {
    let total = 0;
        for (item of dayItems.items) {
            total += (item.count * item.price);
        };
    return total;
}

html变得像:

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

    <div class="item" ng-repeat="item in items.items">
      <a>{{item.count}}</a>
      <a>{{item.price}}</a>   
    </div>

  <div class=bottom">total price: {{calculateTotal(items)}}</div>

</div>

working demo plunker。当然,您可以修改代码以满足您的需求,它只是一个示例实现。


0
投票

添加功能到控制器:

$scope.getTotalPrice = function(items)
{
    return items.reduce(function(sum, item)
    {
        return (sum + (item.count * item.price));
    }, 0);
};

在html中调用它:

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

    <div class="item" ng-repeat="item in items">
      <a>{{item.count}}</a>
      <a>{{item.price}}</a>   
    </div>

  <div class=bottom">total price: {{ getTotalPrice(items) }}</div>

</div>

0
投票

你可以在这里做的是在你的控制器中进行计算逻辑,并在你的视图中显示它的结果:

JavaScript的:

$scope.totalPrice = $scope.items..reduce((sum, item) => {
     return (sum + item.count * item.price);
}, 0);

HTML:

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

  <div class="item" ng-repeat="item in items">
    <a>{{item.count}}</a>
    <a>{{item.price}}</a>
  </div>

  <div class=bottom ">total price: {{totalPrice}}</div>

</div>
© www.soinside.com 2019 - 2024. All rights reserved.