芯片数量限制显示答案

【问题标题】：Limit number of chips display芯片数量限制显示
【发布时间】：2018-03-06 11:11:34
【问题描述】：

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

有没有办法使用<md-chips> 指令来做到这一点？

我更愿意指明我说的是只读筹码列表，不可编辑。我试过md-max-chips，但它只控制新芯片的添加。

一段代码：

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

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

【问题讨论】：

标签： angularjs material-design angularjs-material

【解决方案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();
}

【讨论】：

【解决方案2】：

您可能会尝试像在此 codepen demo 中那样操作您的列表对象。最后一项是占位符项。您应该在渲染/绑定到视图之前操作您的列表。

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

【讨论】：