如何將列表中的元素進行分組並在angularjs中顯示

我試圖根據顯示的創建日期對它們進行分組，以顯示它們的列表。這裏是我的控制器代碼：如何將列表中的元素進行分組並在angularjs中顯示

$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

如何將這些項目按創建日期分組而不重複？我嘗試了獨特的，但它沒有奏效。

來源

2016-01-13 hanu

應該dtTime是在過濾器中的字符串？即'unique：'dtTime'' –

爲什麼你有'itemList（）'的嵌套重複？取出 – charlietfl

是的，它是字符串。 getAbbrevatedDate（）將dtTime作爲參數並返回縮寫的日期。 – hanu

-1

我不知道如何在AngularJS過濾器中執行此操作，但是您始終可以在控制器中創建另一個名爲getDates（）的方法，該方法從itemList（）獲取日期，並使用jQuery計算獨特的日期序列（$ .unique）或下劃線（_.uniq）。

來源

2016-01-13 19:57:26

我會建議您只有一次執行此轉換，並且只要您有可用的數據。

試圖實現這種在NG-重複將在CPU方面非常昂貴，因爲角將需要運行所有這些功能，每次有一個$scope.$digest

的你會怎麼做這個can be found in this plnkr的一個例子。注意，示例使用lodash#groupBy

來源

2016-01-13 20:44:59

獨特的過濾網是不是爲你正常工作（也請務必從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鏈接以查看它

來源

2016-01-13 20:47:34

我試過這個解決方案，當我對同一個日期和不同的時間戳應用獨特的過濾器時，它將它們視爲不同的。例如，時間戳2016-01-15T16：17：38.928-05：00,2016-01-15T15：15：30.928-05：00它不是分組。有沒有辦法將獨特的過濾器應用到dtTime字段的日期部分？ – hanu

如何將列表中的元素進行分組並在angularjs中顯示

回答

相關問題