1

I have a scenario where I have Array of objects and I wanted to display on first few of them (should be configurable).

var users = [{id:1234, name:'ABCD', role: 'XXX', lastLogin: 'XXXX'},
            {id:1235, name:'ABCDE', role: 'XXX', lastLogin: 'XXXX'},
            {id:1236, name:'ABCDF', role: 'XXX', lastLogin: 'XXXX'},
            {id:1237, name:'ABCDG', role: 'XXX', lastLogin: 'XXXX'},
            {id:1238, name:'ABCDH', role: 'XXX', lastLogin: 'XXXX'},
            {id:1239, name:'ABCDI', role: 'XXX', lastLogin: 'XXXX'}]

  <div ng-repeat="user in users">
       {{user.name}}({{user.id}}) {{$last ? ',' : ''}}
  </div>

I just want to display first 2 records as ABCD(1234), ABCDE(1235) + 4 more. and display the other records on hover with a tooltip as 

ABCDF(1236)
ABCDG(1237)
ABCDH(1238)
ABCDI(1239)

with each data on new line on tooltip.

Shashi
  • 1,112
  • 2
  • 17
  • 32

1 Answers1

1

Try to use limitTo

Like this

<div ng-repeat="user in users | limitTo: limit">
       {{user.name}}({{user.id}}) {{$last ? ',' : ''}}
</div>

JS

$scope.limit=2;
Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80
  • Anik Islam Abhi. Thank you for your reply. I know there was a way to limit the records but I actually want the easiest way to show the remaining records on tooltip from html page rather than angular – Shashi Nov 05 '15 at 17:28