Listbox

Поле списка используется для выбора одного или нескольких значений из списка элементов.

С чего начать

Подключите модуль

import {ListboxModule} from 'primeng/listbox';

В .ts файле

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { SelectItemGroup } from 'primeng/api';
 
interface City {
  name: string;
  code: string;
}
 
interface Country {
  name: string;
  code: string;
}
 
@Component({
  selector: 'app-prime-listbox',
  templateUrl: './prime-listbox.component.html',
  styleUrls: ['./prime-listbox.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PrimeListboxComponent implements OnInit {
  groupedCities: SelectItemGroup[];
 
  cities: City[];
 
  countries: Country[];
 
  selectedCity: City;
 
  selectedCountries: Country[];
 
  constructor() {
    this.cities = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Paris', code: 'PRS' },
    ];
 
    this.countries = [
      { name: 'Australia', code: 'AU' },
      { name: 'Brazil', code: 'BR' },
      { name: 'China', code: 'CN' },
      { name: 'Egypt', code: 'EG' },
      { name: 'France', code: 'FR' },
      { name: 'Germany', code: 'DE' },
      { name: 'India', code: 'IN' },
      { name: 'Japan', code: 'JP' },
      { name: 'Spain', code: 'ES' },
      { name: 'United States', code: 'US' },
    ];
 
    this.groupedCities = [
      {
        label: 'Germany',
        value: 'de',
        items: [
          { label: 'Berlin', value: 'Berlin' },
          { label: 'Frankfurt', value: 'Frankfurt' },
          { label: 'Hamburg', value: 'Hamburg' },
          { label: 'Munich', value: 'Munich' },
        ],
      },
      {
        label: 'USA',
        value: 'us',
        items: [
          { label: 'Chicago', value: 'Chicago' },
          { label: 'Los Angeles', value: 'Los Angeles' },
          { label: 'New York', value: 'New York' },
          { label: 'San Francisco', value: 'San Francisco' },
        ],
      },
      {
        label: 'Japan',
        value: 'jp',
        items: [
          { label: 'Kyoto', value: 'Kyoto' },
          { label: 'Osaka', value: 'Osaka' },
          { label: 'Tokyo', value: 'Tokyo' },
          { label: 'Yokohama', value: 'Yokohama' },
        ],
      },
    ];
  }
 
  ngOnInit(): void {}
}

Встройте компонент с помощью тега p-listbox

Single

Advanced with Templating, Filtering and Multiple Selection

country.name

Advanced with Group, Filtering and Multiple Selection

group.label

Свойства

Name	Type	Default	Description
ariaFilterLabel	string	null	Defines a string that labels the filter input.
checkbox	boolean	false	When specified, allows selecting items with checkboxes.
dataKey	string	null	A property to uniquely identify a value in options.
disabled	boolean	false	When present, it specifies that the element should be disabled.
filter	boolean	false	When specified, displays a filter input at header.
filterMatchMode	string	contains	Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".
filterValue	string	null	When specified, filter displays with this value.
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
filterPlaceHolder	string	null	Defines placeholder of the filter input.
emptyFilterMessage	string	No results found	Text to display when filtering does not return any results.
listStyle	string	null	Inline style of the list element.
listStyleClass	string	null	Style class of the list element.
metaKeySelection	boolean	true	Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
multiple	boolean	false	When specified, allows selecting multiple values.
readonly	boolean	false	When present, it specifies that the element value cannot be changed.
emptyMessage	string	No records found.	Text to display when there is no data. Defaults to global value in i18n translation configuration.
emptyFilterMessage	string	No results found	Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
options	array	null	An array of selectitems to display as the available options.
optionLabel	string	label	Name of the label field of an option.
optionValue	string	value	Name of the value field of an option.
optionDisabled	string	disabled	Name of the disabled field of an option.
optionGroupLabel	string	label	Name of the label field of an option group.
optionGroupChildren	string	items	Name of the options field of an option group.
group	boolean	false	Whether to display options as grouped when nested options are provided.
showToggleAll	boolean	true	Whether header checkbox is shown in multiple mode.
style	string	null	Inline style of the container.
styleClass	string	null	Style class of the container.

События

Name	Parameters	Description
onChange	event.originalEvent: browser event<br>event.value: single value or an array of values that are selected	Callback to invoke when value of listbox changes.
onDblClick	event.originalEvent: browser event<br>event.value: single value or an array of values that are selected event.option: option that are clicked	Callback to invoke when an item is double clicked.
onClick	event.originalEvent: browser event<br>event.value: single value or an array of values that are selected event.option: option that are clicked	Callback to invoke when listbox option clicks.

Шаблоны

Name	Parameters
item	$implicit: Data of the option<br>index: Index of the option
group	$implicit: Group option
header	-
empty	-
emptyfilter	-
footer	-

Стилизация

Name	Element
p-listbox	Container element.
p-listbox-list	List container.
p-listbox-item	An item in the list.
p-listbox-header	Header element.
p-listbox-filter-container	Container of filter input in header.

Advanced Menu