我正在使用' ss-multiselect-dropdown'用于多选下拉列表。 我从下拉列表中选择了几个选项并保存了数据。 当我下次更新数据时,该时间已经选择的数据应该显示为选中/选中。 对于单选,它适用于双向数据绑定' [(ngModel)]'但是它不适用于多个选定值。 如何使用' ss-multiselect-dropdown'显示/设置已选择/选中的已选数据?
提前致谢!
答案 0 :(得分:1)
为此您可以使用数组:
selecOptions = [];
HTML方面:
<ss-multiselect-dropdown
[options]="finalServices"
[texts]="myTexts"
[settings]="mySettings"
[(ngModel)]="selecOptions"
(ngModelChange)="onChangeService($event)"
[ngModelOptions]="{standalone: true}">
</ss-multiselect-dropdown>
请记住,此选择基于id
对象数组中的finalServices
。
答案 1 :(得分:0)
创建plunker以进行多选。
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';
import { IMultiSelectSettings, IMultiSelectTexts } from 'angular-2-dropdown-multiselect/src/multiselect-dropdown';
import { MultiselectDropdownModule} from 'angular-2-dropdown-multiselect';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ss-multiselect-dropdown>
`,
})
export class App {
optionsModel: number[] = [ 2, 3];
// Settings configuration
mySettings: IMultiSelectSettings = {
enableSearch: true,
checkedStyle: 'fontawesome',
buttonClasses: 'btn btn-default btn-block',
dynamicTitleMaxItems: 3,
displayAllSelectedText: true
};
// Text configuration
myTexts: IMultiSelectTexts = {
checkAll: 'Select all',
uncheckAll: 'Unselect all',
checked: 'item selected',
checkedPlural: 'items selected',
searchPlaceholder: 'Find',
searchEmptyResult: 'Nothing found...',
searchNoRenderText: 'Type in search box to see results...',
defaultTitle: 'Select',
allSelected: 'All selected',
};
// Options
myOptions: IMultiSelectOption[] = [
{ id: 1, name: 'Volvo'},
{ id: 2, name: 'Honda'},
{ id: 3, name: 'BMW'},
{ id: 4, name: 'Audi'},
];
}
@NgModule({
imports: [ BrowserModule,MultiselectDropdownModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
有关详细信息,请参阅here。