How to limit the objects in angularjs ng-repeat?

Question

My $scope values: I am getting array values in $scope.articles

Example: $scope.articles values looks like:

[
   {
    date: 'some', 
    category: [ {name: "Sports"}, {name: "News"}, {name: "Cinema"} ] 
   }
]

My table view: (jade)

table
  tbody
   tr
     th Date
     th Categories

   tr(ng-repeat='article in articles')
     td
       span {{ article.date }}
     td
      span(ng-repeat='cat in article.category') 
       span {{ cat.name}}

Plunkr: https://plnkr.co/edit/PW51BBnQEv589rIdnaCK?p=preview

This is working correctly, but if category array consists of more than 3 objects table become messy, So I want to limit the category, I want to display only 2 objects

For Example in UI I want to show the category Sports and News in the table, then I want to put this ..... dot type UI, if user hover near the ... dot, I want to show other category For Example Cinema

score 3 · Answer 1 · answered Aug 29 '18 at 18:09

3

You have to create a custom filter which give you the 2 record of the array & pass a skip limit in filter so you can get next 2 objects of array when click or hover dots...

answered Aug 29 '18 at 18:09

sonal.paghdal

266
3
16

score 1 · Answer 2 · answered Aug 29 '18 at 17:46

1

you are looking for limitTo

<div ng-repeat="item in cat in article.category | limitTo: 2">

answered Aug 29 '18 at 17:46

Sajeetharan

216,225
63
350
396

limitTo not working for objects. Read the full question bro – Mohamed Sameer Aug 29 '18 at 17:47
what do you mena by working for objects? anything with ng-repeat should with with limitTo – Sajeetharan Aug 29 '18 at 17:55
OH sorry its my mistake. now how to display other? for eg if use mouse hover near category, all category needs to be shown. see my question – Mohamed Sameer Aug 29 '18 at 17:57
you need to basically remove the filter limitTo, i would suggest you to use a custom filter and call the filter on the mouse move event – Sajeetharan Aug 29 '18 at 17:59
I basically write simple logic to remove limit its working, but the problem is if i hover all category of below also displayed, if i hover via first row i want to show only first row arrays – Mohamed Sameer Aug 29 '18 at 18:06
reproduce it using plunker – Sajeetharan Aug 29 '18 at 18:07

How to limit the objects in angularjs ng-repeat?

2 Answers2