How to filter JSON data by a specific object property with AngularJS UI Router module?

Question

I have a list of emails with their own properties listed in a JSON file:

{"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."}

As you can see, each email has his own status number ("statut" property), which represents a category:

1. Boîte de réception (Inbox)
2. Messages envoyés (Sent messages)
3. Spams (Spams)
4. Corbeille (Trashed messages)

I would like to be able to filter each message according to his status number when I click on a main section:

• Messages with "statut":"1" should be filtered and showed in "Boîte de réception"
• Messages with "statut":"2" should be filtered and showed in "Messages envoyés"
• etc...

I am currently using AngularJS UI Router module to change my views.

I don't have any idea if I have to code a controller for each main section applying his own filter function, using a specific paramater in UI Router's state function or create my own filter to use with ng-repeat.

You can have a look at my Angular application in GitHub: http://github.com/jLinat/AngMail . Just clone it, apply a "npm install" and run the project with "grunt". To see it in action, type in your browser: http://localhost:9001

Thanks.

Answer 1

Its not entirely clear what you're trying to do, but you can filter anything contained in an angular directive by using ng-filter . So if you wanted to display four html sections, each of which with only one type of message, you could use ng-filter on an object property as follows:

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

If you were trying to filter in a directive or in script somewhere, please let me know and I will provide an example of that also.