限制筹码显示数量

Question

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

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

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

一些代码：

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

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

Answer 1

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

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

Answer 2

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

限制筹码显示数量

Limit number of chips display

angularjs

material-design

angularjs-material