In my single-page app with AngularJS (1.5) I need to present a list of items on various views.
However the items in the list are not always the same (for instance, it could be the full list on page A with say 100 objects, and a filtered list for items having a given property on page B, with say 10 objects, and same idea for pages C, D, ...).
I would like to make sure the presentation is always the same across pages (i.e. 3 lines per item, an icon on the left, and a badge on the right), and avoid HTML code duplication.
In addition to the list, each page has some specific content which differ betweeen page A, B, C, ..., so I would like to be able to embed some kind of "list component".
A first idea would be to have a "listItem.html" template that I could include in the views of page A and page B, but I can't find how, since the array of objects is not the same depending on the page - and it has to be given in the ng-repeat.
I have also thought to have a "MyList.js" controller and a "mylist.html" view template to manage this list within the views for page A and page B, but I would need to pass them a different array of objects, so I am not sure it is feasible.
So finally I have no working solution.
Would you have any suggestion for that? Many thanks!
I could address my requirement by developing a directive, which takes the list of objects as a parameter.