限制芯片显示数量

Question

我希望只显示列表中的前三个芯片，并放置一个标记表示还有更多内容可见（例如三个点）。

使用<md-chips>指令是否有方法可以实现此功能？

我更喜欢说明我正在谈论一个只读芯片列表，而不是可编辑的。我尝试过使用md-max-chips，但它只控制添加新芯片。

一些代码片段：

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

我将翻译以下内容：

我希望它的显示方式如下（标题不在代码中）

- Matthias Beaupère

Answer 1

尝试使用此解决方案：链接。 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();
}

- Slava Utesinov

Answer 2

你可能会尝试像这个codepen演示中一样操纵你的列表对象。最后一项是一个占位符项目。在呈现/绑定到视图之前，应该操纵你的列表。

self.vegObjs = [
  {
    'name' : 'Broccoli',
    'type' : 'Brassica'
  },
  {
    'name' : 'Cabbage',
    'type' : 'Brassica'
  },
  {
    'name' : 'Carrot',
    'type' : 'Umbelliferous'
  },
  {
    'name' : '...',
    'type' : ''
  }
];

- lin