Limit number of chips display

Question

I'd like to display only a the first three chips of a list, and put a marker that there are more to see (like three dots for example).

Is there a way to do so with the <md-chips> directive ?

I'd prefer specify that I'm talking about a read-only chips list, not editable. I've tried with md-max-chips but it only controls the add of new chips.

Some piece of code :

<div layout="row" layout-align="start center">
    <md-chips ng-model="mylist" readonly="true"></md-chips>
</div>

How I would like it to be displayed (the header is not in the code)

Answer 1

Try this solution:

HTML:

<md-chips ng-model="ctrl.visible" readonly='true' ng-click="ctrl.select($event)">
</md-chips>

Javascript:

self.fruitNames = ['Apple', 'Banana', 'Orange', 'Test1', 'Test2', 'Test3', 'Test4'];

var i = 0;
function ModifyVisible(){
  self.visible = self.fruitNames.slice(0, (3 * ++i));
  if(self.fruitNames.length > self.visible.length)
    self.visible.push('...');
}
ModifyVisible();

self.select = function($event) {             
  if($event.path[0].textContent == '...')
    ModifyVisible();
}