时间戳

首页 > 解决方案 > 需要在angular2上选择多个带有下拉菜单的图像

angular - 需要在angular2上选择多个带有下拉菜单的图像

问题描述

html

<div class="form-group col-xs-12 col-md-3 materialpo">
                                    <label>{{'MATERIAL' | translate}} 
                                    </label><span class="errorMsg">* 
                                    </span> <br />

<p-autoComplete [(ngModel)]="selctedOrderLine.material"

(completeMethod)="searchMaterial($event)" field="displayValue" 
[minLength]="1"
                                        formControlName="material" 
[size]="30" [style]="{'width':'318px'}"
                                        placeholder="Enter Material" 
(ngModelChange)="materialMsg=''" [dropdown]="true"

(onDropdownClick)="handleMaterialDropdownClick($event)"

[disabled]="disableMaterialField">

</p-autoComplete>

</div>

    <div class="col-md-3 text-center"
*ngFor="let image of imagess; let i=index">

  <input type="checkbox" 
    [(ngModel)]="val" (ngModelChange)="onChange($event.target.checked)" name="team" 
    [ngModelOptions]="{standalone: true}"/>
     <img [src]="image" />
   </div>

ts

onChange(isCheck:any){
    if(isCheck){
        this.changeborder=true;
    }else{
        this.changeborder=false;
    }
}

我刚刚添加了一个下拉菜单和一些带有复选框的图像。我想用下拉菜单选择多个图像。

请提供一些关于带有角度下拉列表的多个图像的想法。

标签： angular

解决方案

step 1 : set checked key along with image.

   ex. this.imagess = [{ 'checked': false , 'image' :'abc1.jpeg'} , { 'checked': false , 'imageUrl' :'abc2.jpeg'}];

bind same checked property in templeate.

step 2

<div class="form-group col-xs-12 col-md-3 materialpo">
                                    <label>{{'MATERIAL' | translate}} 
                                    </label><span class="errorMsg">* 
                                    </span> <br />

<p-autoComplete [(ngModel)]="selctedOrderLine.material"

(completeMethod)="searchMaterial($event)" field="displayValue" 
[minLength]="1"
                                        formControlName="material" 
[size]="30" [style]="{'width':'318px'}"
                                        placeholder="Enter Material" 
(ngModelChange)="materialMsg=''" [dropdown]="true"

(onDropdownClick)="handleMaterialDropdownClick($event)"

[disabled]="disableMaterialField">

</p-autoComplete>

</div>

    <div class="col-md-3 text-center"
*ngFor="let image of imagess; let i=index">

  <input type="checkbox" 
    [(ngModel)]="image['checked']" name="team{{i}}"/>
     <img [src]="image['imageUrl']" />
   </div>

推荐阅读