Angularjs:汇总数据在一个循环与NG-重复 [英] Angularjs: summarizing data in one loop with ng-repeat

查看:240
本文介绍了Angularjs:汇总数据在一个循环与NG-重复的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图合理化NG-重复显示和在一个循环中汇总数据。
注意:不要将要求通过数据循环解决方案的再一次

I'm trying to rationalize ng-repeat to display and summarize data in one loop. Note: DON'T bring solutions which require looping through the data more then one time.

下面是我的Ctrl键

 $scope.summary = {
        keren: 0
        , r: 0
        , sum: 0
        , extra: 0
    }

    $scope.gainSummary = function(obj) {
        var k = $scope.summary;
        console.log(obj)
        if (typeof obj == 'object') {

            k.keren += obj.keren;
            k.r += obj.r
            k.sum += obj.sum
            k.extra += obj.extra
        } else {

            return k;
        }


    }

 $scope.board = [
    {

         date: '10/11/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
    },
     {
         title: 'חודש אוקטובר 2015'
        , date: '10/10/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
     },
      {

         date: '10/09/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
      },
       {

         date: '10/08/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },
        {

         date: '10/07/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
        },
         {

         date: '10/06/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
         },
          {

         date: '10/05/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
          },
           {

         date: '10/04/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
           },
            {

         date: '10/03/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
            },
]

这是我的HTML

And here is my HTML

 <thead>
        <tr>
            <th>{{local.date}}</th>
            <th>{{local.keren}}</th>
            <th>{{local.r}}</th>
            <th>{{local.sum}}</th>
            <th>{{local.extra}}</th>

        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="i in board" ng-click="state.go('app.silukin', {id: $index})">



            <td>{{i.date}}</td>
            <td>{{i.keren | currency : "₪ "}}</td>
            <td>{{i.r | currency : "₪ "}}</td>
            <td>{{i.sum | currency : "₪ "}}</td>
            <td>{{i.extra | currency : "₪ "}}</td>
            <td style="display:none">{{gainSummary({keren: i.keren, r: i.r, sum: i.sum, extra: i.extra})}}</td>
        </tr>

    </tbody>

    <tfoot>
        <tr ng-repeat="k in gainSummary(1)">
            <td>{{local.sum}}</td>
            <td>{{k.keren}}</td>
            <td>{{k.r}}</td>
            <td>{{k.sum}}</td>
            <td>{{k.extra}}</td>


        </tr>
    </tfoot>
</table>

问题是gainSummary()函数里面的那个的console.log显示泰德循环发生更多的则预期。并且不显示金额。做任何一件有一个解释,或者任何解决方案?

The problem is that console.log inside the gainSummary() function shows thet the loop happens more then expected. And the sums are not displayed. Do any one have an explanation, or any solution?

感谢

推荐答案

好了,现在我发现这个问题。
这里是解决方案。两者显示用数据和sumarizing它发生在一个循环

Ok, Now i found the problem. Here is the solution. Both the displaying data and sumarizing it happens in one loop

HTML

 <table>
    <thead>
        <tr>
            <th>{{local.date}}</th>
            <th>{{local.keren}}</th>
            <th>{{local.r}}</th>
            <th>{{local.sum}}</th>
            <th>{{local.extra}}</th>

        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="i in board" ng-click="state.go('app.silukin', {id: $index})">


            <td style="display:none" ng-init="gainSummary(i)"></td>
            <td>{{i.date}}</td>
            <td>{{i.keren | currency : "₪ "}}</td>
            <td>{{i.r | currency : "₪ "}}</td>
            <td>{{i.sum | currency : "₪ "}}</td>
            <td>{{i.extra | currency : "₪ "}}</td>

        </tr>

    </tbody>

    <tfoot>
        <tr>
            <td>{{local.sum}}</td>
            <td>₪ {{summary.keren}}</td>
            <td>₪ {{summary.r}}</td>
            <td>₪ {{summary.sum}}</td>
            <td>₪ {{summary.extra}}</td>


        </tr>
    </tfoot>
</table>

JS:

 $scope.summary = {
    keren: 0
    , r: 0
    , sum: 0
    , extra: 0
};

$scope.gainSummary = function (obj) {

    var k = $scope.summary;

    if (typeof obj == 'object') {

        k.keren += parseInt(obj.keren);
        k.r += parseInt(obj.r)
        k.sum += parseInt(obj.sum)
        k.extra += parseInt(obj.extra)
    } else {

        return k;
    }


}



 $scope.board = [
    {
        title: 'חודש נובמבר 2015'
        , date: '10/11/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
    },
     {
         title: 'חודש אוקטובר 2015'
        , date: '10/10/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
     },
      {
          title: 'חודש ספטמבר 2015'
        , date: '10/09/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
      },
       {
           title: 'חודש אוגוסט 2015'
        , date: '10/08/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },
       {
           title: 'חודש יולי 2015'
        , date: '10/07/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },
     {
         title: 'חודש יוני 2015'
        , date: '10/06/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
     },
      {
          title: 'חודש מאי 2015'
        , date: '10/05/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
      },
       {
           title: 'חודש אפריל 2015'
        , date: '10/04/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },
       {
           title: 'חודש מרץ 2015'
        , date: '10/03/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },
     {
         title: 'חודש פברואר 2015'
        , date: '10/02/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
     },
      {
          title: 'חודש ינואר 2015'
        , date: '10/01/2015'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
      },
       {
           title: 'חודש דצמבר 2014'
        , date: '10/12/2014'
        , keren: '1026.27'
        , r: '133.13'
        , sum: '1159.40'
        , extra: '14188.07'
       },


]

这篇关于Angularjs:汇总数据在一个循环与NG-重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆