我正在致力于在 Angular 2 Material Design 应用程序中为多选下拉列表创建自定义 View 。该要求要求对下拉列表中显示的选项进行分层缩进,如下面的屏幕截图所示。
基本上,我收到的数据集长度可以是 2 位、3 位或 4 位。我需要根据数据字段的长度应用缩进。
我尝试了多种选择,但到目前为止我还无法实现这个目的。我所做的最新代码尝试有以下类型的代码片段:
<md-select multiple placeholder="Data" [(ngModel)]="selecteddatas" (ngModelChange)="onChange($event)">
<md-option *ngFor="let data of datas" [value]="data.value">
<div *ngIf="{{data.viewValue.length}}==={{2}}">{{ data.viewValue }}</div>
<div *ngIf="{{data.viewValue.length}}==={{3}}"> {{ data.viewValue }}</div>
<div *ngIf="{{data.viewValue.length}}==={{4}}"> {{ data.viewValue }}</div>
</md-option>
</md-select>
有人可以指导我实现此目的的正确方法,或者是否有可用于 Angular 2 Material Design 的组件可供我用于此目的?
提前致谢。
最佳答案
您的屏幕截图有复选框,而不是选择
和选项
,因此您可能需要使用md-checkbox
。至于 *ngIf
检查,您不需要使用插值。
使用
进行缩进并不是最好的主意,正如您在 demo 中看到的那样,它缩进数字,但不缩进复选框,因此采用 @cgatian 建议的 css 方法将是更好的选择。
<div *ngFor="let item of filteredList">
<div [ngClass]="{'one-indent': item.number.length == 2,
'two-indent': item.number.length == 3,
'three-indent': item.number.length == 4 }">
<md-checkbox [checked]="item.value">
{{ item.number }}
</md-checkbox>
</div>
</div>
CSS:
.one-indent{
margin-left: 5px;
}
.two-indent{
margin-left: 15px;
}
.three-indent{
margin-left: 25px;
}
关于Angular 2 Material Design 具有分层缩进的多选下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44725980/