【问题标题】:How to Sum a Json Array value in AngularJS ng-repeat如何在 AngularJS ng-repeat 中对 Json 数组值求和
【发布时间】:2016-02-19 20:35:23
【问题描述】:

我想对使用 JSON 数组动态添加的产品计数求和。

               <tr ng-repeat="(key,val) in form.products">
                    <td>{{ProductName(key)}}</td>
                    <td >
                        <input type="text" name="products" ng-model="form.products[key]" class="form-control">
                    </td>
                </tr>

上例中的产品总和如何获得?

【问题讨论】:

  • 获取控制器中的计数并使其在 $scope 中可用,以便模板在 ng-repeate 中使用
  • 我试过这个 $scope.calculateSum = function () { var sum = 0; for (var i = 0; i 。我是 Angular JS 的新手

标签: javascript angularjs json


【解决方案1】:

使用lodash

假设您要求和的值位于名为“价格”的属性中:

{{_(form.products).mapValues('price').sum()}}

您可能需要先将 lodash 纳入您的范围。在控制器中,类似:

scope._ = _;

this approach

【讨论】:

  • 不使用lodash就不行吗?我没有任何属性值,我的数组看起来像 {"1":20,"2":15,"3":5},产品代码和产品价格
【解决方案2】:

您正在使用“具有属性的对象”而不是“对象数组”,这就是为什么您不能使用上面的示例,$scope.products.length;....

您的产品对象及其属性

$scope.products ={
"1":"20",//property 1 with value 20
"2":"35",//property 2 with value 35
"3":"150"//property 3 with value 150
}

数据对象(具有您所拥有的属性的对象)

 $scope.myData = {"1":120,"2":250,"3":500};

迭代到对象属性并求和价格的函数

//read object properties and sum price
    $scope.calculateSum = function(data){
    var sum=0;  
    var counter=0;
     for (var property in data) {
       if (data.hasOwnProperty(property)) {
          sum += data[property];
          counter++;
       }
     }
     return sum;
    };

迭代到对象属性并计算产品的函数

//read object properties and count the products
   $scope.countProducts = function(data){
    var counter=0;
     for (var property in data) {
       if (data.hasOwnProperty(property)) {
          counter++;
       }
     }
     return counter;
    };

进入您的 HTML 模板:

  <table>
  <tr ng-repeat="(key,value) in myData track by $index">
   <td>
        <input type="text" name="id" ng-model="key" class="form-control">
  </td>
   <td>      
      <input type="text" name="price" ng-model="value" class="form-control">            
   </td>
  </tr>
  <tr>
    <td>Products: {{countProducts(myData)}}</td>
    <td>Sum: {{calculateSum(myData)}}</td>
  </tr>
  </table>

我做了一个实例,计算产品并计算产品价格:http://plnkr.co/edit/FmJhvV?p=preview

希望有帮助,祝你好运。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-23
    相关资源
    最近更新 更多