Angular PrimeNG Form MultiSelect Компонент режима многоточия

Опубликовано: 24 Февраля, 2023

Angular PrimeNG — это набор из сотен компонентов пользовательского интерфейса, которые разработчики могут использовать для ускорения процесса разработки своих приложений. Он разработан PrimeTek Informatics, также известной как PrimeFaces. В этой статье мы обсудим компонент Angular PrimeNG Form MultiSelect Ellipsis Mode.

Компонент MultiSelect позволяет пользователям выбирать несколько параметров из набора предоставленных параметров. Режим Elipsis включен по умолчанию в Multiselect. В режиме с многоточием выделенные параметры заменяются многоточием (три точки). Режим многоточия можно включить явно, установив для свойства selectedItemsLabel значение «многоточие».

Свойства режима MultiSelect Elipsis формы Angular PrimeNG:

options: это свойство MultiSelect принимает массив объектов для отображения в качестве параметров MultiSelect.
selectedItemsLabel: это свойство используется для предоставления шаблона для указания переполнения выбранных параметров. По умолчанию для него установлено значение «многоточие», где оно показывает многоточие, чтобы указать на переполнение содержимого.
optionLabel: это свойство объекта параметров, которое будет использоваться в качестве метки параметра.
defaultLabel: это заполнитель, который будет отображаться, если элемент не выбран.
display: это свойство используется для отображения выбранных элементов в виде чипа, установив для него значение «chip».

Синтаксис:

<p-multiSelect
    [options]="..."
    selectedItemsLabel="ellipsis"
    [(ngModel)]="..."
    optionLabel="..."
    defaultLabel="...">
</p-multiSelect>

Создание приложения и установка необходимых модулей:

Шаг 1: Создайте приложение Angular с помощью следующей команды.

ng new my_app

Шаг 2: После создания приложения перейдите в папку проекта с помощью приведенной ниже команды.

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта показана на рисунке ниже.

Пример 1: Этот пример иллюстрирует режим многоточия компонента MultiSelect. Здесь переполненные выбранные элементы будут обозначены многоточием.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Elipsis Mode Component
</h5>
 
<p-multiSelect
    class="custom-ms"
    [options]="items"
    [(ngModel)]="selectedItems"
    optionLabel="name"
    defaultLabel="Select Item(s)">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Item{
    id: number;
    name: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 200px !important;
        }
        `
    ]
})
 
export class AppComponent {
    items: Item[] = [];
    selectedItems: Item[] = [];
 
    ngOnInit()
    {
        this.items = [
            {
                name: "Wood",
                id: 1
            },
            {
                id: 2,
                name: "Pen"
            },
            {
                id: 3,
                name: "Smartphone"
            },
            {
                id: 4,
                name: "Tablet"
            },
            {
                id: 5,
                name: "Pencil"
            },
            {
                id: 6,
                name: "Books"
            },
        ];
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { MultiSelectModule} from "primeng/multiselect";
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }

Выход:

Пример 2: В этой статье мы установили режим отображения MultiSelect на чип, поэтому чипы переполнения будут обозначаться многоточием или тремя точками.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Elipsis Mode Component
</h5>
 
<p-multiSelect
    class="custom-ms"
    [options]="items"
    display="chip"
    selectedItemsLabel="ellipsis"
    [(ngModel)]="selectedItems"
    optionLabel="name"
    defaultLabel="Select Item(s)">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Item{
    id: number;
    name: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 250px !important;
        }
        `
    ]
})
 
export class AppComponent {
    items: Item[] = [];
    selectedItems: Item[] = [];
 
    ngOnInit()
    {
        this.items = [
            {
                name: "Wood",
                id: 1
            },
            {
                id: 2,
                name: "Pen"
            },
            {
                id: 3,
                name: "Smartphone"
            },
            {
                id: 4,
                name: "Tablet"
            },
            {
                id: 5,
                name: "Pencil"
            },
            {
                id: 6,
                name: "Books"
            },
        ];
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { MultiSelectModule} from "primeng/multiselect";
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }

Выход:

Ссылка: https://www.primefaces.org/primeng/multiselect

Technical Scripter Picked AngularJS

Angular PrimeNG Form MultiSelect Компонент режима многоточия

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ