限制显示的芯片数量

Question

我只想显示列表中的前三个筹码，并放置一个标记，以便查看更多（例如三个点）。

有没有办法使用<md-chips>指令？

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

一些代码：

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

我希望如何显示它（标题不在代码中）

Answer 1

尝试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();
}

Answer 2

您可能会尝试操纵列表对象，例如 codepen demo 。最后一项是占位符项。在渲染/绑定到视图之前，您应该操作列表。

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