Question

我有一个html页面，显示按月分类的数据列表 - 这是一个示例html页面视图：

2014年7月：

星期一7日
- 数据7
- 数据6
周五4日
- 数据5
- 数据4

2014年5月：

周日15日
- 数据3
周四8日
- 数据2
- 数据1

...

json数据采用以下格式：

data_list = [
  {
    "id": 1, 
    "name": Data1, 
    "date": "2014-05-08", 
  },
  {
    "id": 2, 
    "name": Data2, 
    "date": "2014-05-08", 
  },  
  {
    "id": 3, 
    "name": Data3, 
    "date": "2014-05-15", 
  }, 
  {
    "id": 4, 
    "name": Data4, 
    "date": "2014-07-04", 
  }, 
  {
    "id": 5, 
    "name": Data5, 
    "date": "2014-07-04", 
  }, 
  {
    "id": 6, 
    "name": Data6, 
    "date": "2014-07-07", 
  }, 
  {
    "id": 7, 
    "name": Data7, 
    "date": "2014-07-07", 
  }, 
]

请提前帮助我在angularjs中实现这一点。

Answer 1

首先，您创建一个自定义过滤器，用于将输入数据分组为所需的输出格式。我创建了一个名为groupingFilter

的自定义过滤器

var yourFilter = angular.module('projectFilters', []);

yourFilter.filter("groupingFilter", function () {

    return function (orig, same, getID) {
        if (!(orig instanceof Array)) return orig;
        if (orig.length == 0) return orig;

        var result = [];

        var cur = [];
        var i = 0;
        for (i = 0; i < orig.length; i ++) {
            if (i == 0 || same(orig[i], orig[i-1])) {
                cur.push(orig[i]);
            } else {
                result.push({
                    id: getID(orig[i-1]),
                    items: cur
                });

                cur = [orig[i]];
            }

        }
        result.push({
            id: getID(orig[orig.length - 1]),
            items: cur
        });

        var toKey=function(item){
            return moment(item.logdate).format("YYYY-MM-DD");
          };

        function pushtoexists(itemDateMap,item,date){
            for(var j=0; j<itemDateMap.length; j++){
                if(itemDateMap[j].date == date){
                    itemDateMap[j].logtimes.push(item);
                    return true;
                }
            }
            return false;
        }
        function push_item(itemDateMap,item,date){
            itemDateMap.push({
                'date':date,
                'item':[item]
            });
        }
        var addArrayToMap = function(items){
            var itemDateMap = [];

            for(var i=0; i<items.length; i++){
                var item = items[i]; 
                var date = toKey(item);

                var push_obj = pushtoexists(itemDateMap,item,date);
                if(itemDateMap.length == 0 || push_obj== false){
                    push_item(itemDateMap,item,date);
                }

            }

            return {
                "data_list":itemDateMap,
                };
          };


        for (i = 0; i < result.length; i ++) {
            var map = addArrayToMap(result[i].items);
            result[i].data = map.item_list;
            result[i].$$hashKey = i;

        }

        return result;
    };
});

将以下行添加到控制器。

 var data_list = [.. your input data ..]

 $scope.filteredData = $filter("orderBy")(data_list, function (p) {return moment(p.date);}, true);  

 $scope.filteredData = $filter("timelogGroupingFilter")(
        $scope.filteredData, 

        function (p1, p2) {
            return ((moment(p1.logdate).month() == moment(p2.logdate).month()) && (moment(p1.logdate).year() == moment(p2.logdate).year())); 
        },

        function (p) {
            return moment(p.logdate).startOf("month");
        }
    );

data_list是您的输入数据。 $scope.filteredData将包含最终的排序数据。

按角度分组按月分组数据

1 个答案: