Css 动态多列下拉菜单-Angular2和Bootstrap
如何创建动态多列下拉列表。我正在使用angular2并寻找类似的东西 但在这里,我们将列固定为3,并对列表项进行硬编码。在我的例子中,我有一个动态列表,希望在一列中显示5项。例如:如果列表包含20项,那么我们将有4列,每列中有5项。我的代码如下所示Css 动态多列下拉菜单-Angular2和Bootstrap,css,twitter-bootstrap,angular,twitter-bootstrap-3,Css,Twitter Bootstrap,Angular,Twitter Bootstrap 3,如何创建动态多列下拉列表。我正在使用angular2并寻找类似的东西 但在这里,我们将列固定为3,并对列表项进行硬编码。在我的例子中,我有一个动态列表,希望在一列中显示5项。例如:如果列表包含20项,那么我们将有4列,每列中有5项。我的代码如下所示 .... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"
....
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#" role="button"
aria-haspopup="true" aria-expanded="false">
Artists
<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li *ngFor="let artist of artists">
<a><input type="checkbox"> {{artist.name}} </a>
</li>
</ul>
</li>
.....
。。。。
-
{{artist.name}
.....
我现在使用ngFor指令循环浏览艺术家列表,并将其显示在单列中。但希望根据列表的大小以多列显示。应使用简单的块函数从数据中创建一个新数组:
public chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
公共区块(arr,大小){
var newArr=[];
对于(var i=0;i
以下是一个例子:
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6" *ngFor="let persons of chunk(persons, 3)">
<ul class="multi-column-dropdown">
<li *ngFor="let person of persons"><a href="#">{{person.name}}</a></li>
</ul>
</div>
</div>
</ul>