Question

我试图通过根据创建日期对项目列表进行分组来显示项目列表。这是我的控制器代码：

 $scope.itemList = function () {
      return  itemService.getList();      
};

这是我的HTML：

<div ng-repeat="date in itemDates = (itemList()| unique:dtTime)">
    <div id="itemDay" class="itemFont">{{getAbbrevatedDate(date.dtTime)}}</div>   
    <div ng-repeat="item in itemList()"">   
        <div ng-show="getAbbrevatedDate(date.dtTime) === getAbbrevatedDate(item.dtTime)" id="itemRow">    
            <div id="itemRowContent">               
                <div id="itemName" class="itemFont">{{item.name}}</div>
                <div id="itemDescription" class="itemFont">{{item.description}}</div>

            </div>           
        </div>      
    </div>
</div>

itemList中的数据是：

[{
    "name":"itemx001",
    "dtTime":"2016-01-13T10:17:31.279-05:00",
    "description":"this item delivered last week"
},
{
    "name":"itemx002",
    "dtTime":"2016-01-13T10:17:31.279-05:00",
    "description":"this item delivered yesterday"
},
{
    "name":"itemx003",
    "dtTime":"2016-01-12T10:17:31.279-05:00",
    "description":"this item delivered last month"
},
{
    "name":"itemx004",
    "dtTime":"2016-01-12T10:17:31.279-05:00",
    "description":"this item delivered last November"
}
{
    "name":"itemx005",
    "dtTime":"2016-01-12T10:17:31.279-05:00",
    "description":"this item delivered last October"
}]

getAbbrevatedDate（）返回今天，昨天，上周等等。

我得到以下输出：

Today
itemx001
this item delivered last week
itemx002
this item delivered yesterday
Today
itemx001
this item delivered last week
itemx002
this item delivered yesterday
yesterday
itemx003
this item delivered last month
itemx004
this item delivered last November
itemx005
this item delivered last October
yesterday
itemx003
this item delivered last month
itemx004
this item delivered last November
itemx005
this item delivered last October
It is repeating the loop for each item. But I am trying to display like this
Today
itemx001
this item delivered last week
itemx002
this item delivered yesterday
yesterday
itemx003
this item delivered last month
itemx004
this item delivered last November
itemx005
this item delivered last October

如何按创建日期对这些项目进行分组而不重复？我尝试了独特的但没有用。

Answer 1

我建议您只进行一次此转换，并且只要您有可用的数据。

尝试在ng-repeat中实现这一点在CPU方面非常昂贵，因为Angular需要在每次$scope.$digest

时运行所有这些函数

如何执行此操作的示例can be found in this plnkr。请注意，该示例使用lodash#groupBy

Answer 2

唯一过滤器无法正常工作（同时确保从here引用ui.filter模块），这里应该如何：

<div ng-repeat="date in itemList  | unique:'dtTime' ">
     {{ date.dtTime}}

     <div ng-repeat="item in itemList ">   
        <div ng-show="date.dtTime === item.dtTime" id="itemRow">    
            <div id="itemRowContent">               
                <div id="itemName" class="itemFont">{{item.name}}</div>
                <div id="itemDescription" class="itemFont">{{item.description}}</div>

            </div>           
        </div>      
    </div>

我没有使用你的方法getAbbrevatedDate（），但你可以使用它！

以下是plunker链接，可以看到它

Answer 3

我不知道如何在AngularJS过滤器中执行此操作，但您始终可以在控制器中创建另一个名为getDates（）的方法，该方法从itemList（）获取日期并使用jQuery计算唯一的日期序列（ $ .unique）或下划线（_.uniq）。

如何对列表中的元素进行分组并以angularjs显示

3 个答案: