如何使用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>

如果您尝试过滤指令或脚本的某个地方，请告诉我，我还将提供一个示例。