如何使用AngularJS UI Router模塊通過特定的對象屬性過濾JSON數據？

Question

我在JSON文件中列出了具有其自身屬性的電子郵件列表：

{"id":5,"lu":false,"statut":2,"nom_expediteur":"Brian Patterson","nom_destinataire":"Frank Martin","email_expediteur":"fmartin4@intel.com","email_destinataire":"fmartin4@ibm.com","date":"2013-08-08","objet":"sed vestibulum sit","contenu":"Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum."},
{"id":6,"lu":true,"statut":1,"nom_expediteur":"Patricia Berry","nom_destinataire":"Jean Bowman","email_expediteur":"jbowman5@facebook.com","email_destinataire":"jbowman5@eepurl.com","date":"2014-10-18","objet":"nibh in quis justo maecenas rhoncus","contenu":"Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum."},
{"id":9,"lu":true,"statut":4,"nom_expediteur":"Donald Williams","nom_destinataire":"Billy Black","email_expediteur":"bblack8@nsw.gov.au","email_destinataire":"bblack8@virginia.edu","date":"2012-06-22","objet":"tristique fusce congue diam id","contenu":"Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est."},
{"id":7,"lu":false,"statut":3,"nom_expediteur":"Frank Simmons","nom_destinataire":"Tammy Dunn","email_expediteur":"tdunn6@blogger.com","email_destinataire":"tdunn6@oaic.gov.au","date":"2015-01-22","objet":"vivamus metus arcu","contenu":"Fusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo."}

如您所見，每封電子郵件都有自己的狀態編號（“ statut”屬性），它代表一個類別：

1. Boîtederéception（收件箱）
2. 消息使者（已發送消息）
3. 垃圾郵件（垃圾郵件）
4. Corbeille（已刪除郵件）

當我單擊主要部分時，我希望能夠根據其狀態編號過濾每條消息：

• 帶有“ statut”：“ 1”的消息應過濾並顯示在“Boîtederéception”中
• 帶有“ statut”：“ 2”的消息應過濾並顯示在“ Messagesenvoyés”中
• 等等...

我目前正在使用AngularJS UI Router模塊來更改視圖。

我不知道是否需要為每個主要部分編寫一個應用自己的過濾器功能的控制器，在UI Router的狀態函數中使用特定的參數，還是創建自己的過濾器以與ng-repeat結合使用。

您可以在GitHub中查看我的Angular應用程序： http : //github.com/jLinat/AngMail 。 只需克隆它，應用“ npm install”並使用“ grunt”運行項目。 要查看其運行情況，請在瀏覽器中輸入： http：// localhost：9001

謝謝。

Answer 1

尚不清楚您要做什么，但是您可以使用ng-filter過濾 angular指令中包含的所有內容。 因此，如果要顯示四個html部分，每個部分僅包含一種消息類型，則可以對對象屬性使用ng-filter，如下所示：

<div ng-repeat="item in myItems track by item.id | {'statut' : 1}">
  <p> This will repeat for every message with statut : 1.</p>
</div>

如果您嘗試過濾指令或腳本的某個地方，請告訴我，我還將提供一個示例。