Question

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;
    }
}

我刚刚添加了一个drowpdown，并带有复选框显示了一些图像。我想选择带有下拉菜单的多张图片。

请提供一些有关角度下拉菜单的图像的信息。

Answer 1

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>

需要选择多个图像，并且在angular2上具有下拉菜单

1 个答案: