简体   繁体   中英

ng select - multiple values - select same values more than once

is there a way to use ng select to have multiple selections and the possibility to have the same value/s more than once in the same selection? I could only achieve multiple with each value possible to choose only once: 倍数,每个值只有一次

HTML code:

<ng-select [closeOnSelect]="false" [selectableGroup]="true" [items]="allowedValues"
        [(ngModel)]="selectedValuesArray" [selectableGroupAsModel]="false"
        (change)="raiseChangeEvent($event)" name="dropdown-element" [multiple]="true" [maxSelectedItems]="maxLength"
        [clearable]="false">
        <ng-template ng-option-tmp let-item="item">
            <div class="option-line">
                <p>{{item == null ? 'N/A' : item}}</p>
            </div>
        </ng-template>
    </ng-select>

You could exploit the bindLabel and bindValue attributes. suppose you pass in the following items:

    allowedValues= [
        {label: 1, value: 'first_0'},
        {label: 2, value: 'second_0'}
    ]

Your HTML will look like this, mind the addition of bindLabel and bindValue, the change in (change) and the [hideSelected] attribute:

<ng-select [closeOnSelect]="false" [selectableGroup]="true" [items]="allowedValues"
        [(ngModel)]="selectedValuesArray" [selectableGroupAsModel]="false"
        (change)="raiseChangeEvent($event); addItem($event)" name="dropdown-element" [multiple]="true" [maxSelectedItems]="maxLength"
        [clearable]="false" bindLabel="label" bindValue="value" [hideSelected]="true">
        <ng-template ng-option-tmp let-item="item">
            <div class="option-line">
                <p>{{item == null ? 'N/A' : item}}</p>
            </div>
        </ng-template>
    </ng-select>

Whenever an item is selected you could insert a new one in the list with the addItem() function. For example when the user selects 1, add {label: 1, value: 'first_1'} to the allowedValues . This way you will end up with an array of values that are unique, but the user is tricked into believing he is actually clicking the same items over and over again.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM