Angular 2 Material Design多选下拉式,带有分层缩进

时间:2017-06-23 16:18:11

标签: angular material-design angular-material2

我正在为Angular 2 Material Design应用程序中的Multi-select Drop-down创建自定义视图。该要求要求下拉屏幕中显示的选项的分层缩进,如下面的屏幕截图所示。 Multi-select Indented Drop-down

基本上,我收到的数据集可以是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}}">&nbsp;&nbsp;{{ data.viewValue }}</div>
                <div *ngIf="{{data.viewValue.length}}==={{4}}">&nbsp;&nbsp;&nbsp;&nbsp;{{ data.viewValue }}</div>
            </md-option>
        </md-select>    

有人可以指导我正确实施此方法,或者是否有可用于Angular 2 Material Design的组件可用于此目的?

提前致谢。

1 个答案:

答案 0 :(得分:1)

您的屏幕截图中包含复选框,而不是selectoption,因此您可能需要使用md-checkbox。对于*ngIf检查,您不需要使用插值。

使用&nbsp;进行缩进不是最好的主意,正如您在https://www.testdome.com/for-developers/solve-question/9930中看到的那样,它会缩进数字,而不是复选框,因此采用@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;
}