限制显示的芯片数量

问题描述 投票:3回答:2

我想只显示一个列表的前三个芯片,并放置一个标记,可以看到更多(例如三个点)。

有没有办法用<md-chips>指令这样做?

我更愿意指出我在谈论只读芯片列表,而不是可编辑的。我尝试过md-max-chips,但它只控制新芯片的添加。

一些代码:

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

我希望如何显示它(标题不在代码中)

enter image description here

angularjs material-design angularjs-material
2个回答
3
投票

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

1
投票

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

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