Dropdown（下拉列表框）

下拉列表框，支持自定义过滤属性

使用说明

1.Import

import {Dropdown} from 'primeng/primeng';

2.Getting Started

使用[(ngModel)]实现数据双向绑定，[options]提供下拉选项值

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

import {SelectItem} from 'primeng/primeng'; export class MyModel { 
    cities: SelectItem[]; 
    selectedCity: string; 
    constructor() { 
        this.cities = [];         
        this.cities.push({label:'Select City', value:null}); 
        this.cities.push({label:'New York', value:{id:1, name: 'New York', code: 'NY'); 
        this.cities.push({label:'Rome', value:{id:2, name: 'Rome', code: 'RM');
        this.cities.push({label:'London', value:{id:3, name: 'London', code: 'LDN'); 
        this.cities.push({label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST');
        this.cities.push({label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'); 
    } 
}

3.Model Driven Forms

Dropdown可以用于表单

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

4.Filtering

选项可以使用一个输入字段过滤的叠加使过滤器属性。

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" [filter]="true"></p-dropdown>

5.Custom Content（自定义内容）

[option]用来定义下拉内容，自定义支持使用 标签使用所选内容作为自己的模板参数

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">  
    <template let-car> 
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;"> 
            <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/> 
            <div style="font-size:14px;float:right;margin-top:4px">
                {{car.label}}
            </div> 
        </div> 
    </template> 
</p-dropdown>

import {SelectItem} from 'primeng/primeng' 
export class MyModel { 
    cars: SelectItem[]; 
    selectedCar: string; 
    constructor() { 
        this.cars = []; 
        this.cars.push({label: 'Audi', value: 'Audi'}); 
        this.cars.push({label: 'BMW', value: 'BMW'}); 
        this.cars.push({label: 'Fiat', value: 'Fiat'}); 
        this.cars.push({label: 'Ford', value: 'Ford'}); 
        this.cars.push({label: 'Honda', value: 'Honda'}); 
        this.cars.push({label: 'Jaguar', value: 'Jaguar'}); 
        this.cars.push({label: 'Mercedes', value: 'Mercedes'}); 
        this.cars.push({label: 'Renault', value: 'Renault'}); 
        this.cars.push({label: 'VW', value: 'VW'}); 
        this.cars.push({label: 'Volvo', value: 'Volvo'}); 
    } 
}

6.属性

7.事件

8.Styling

9.Dependencies

Native component that requires the css of PrimeUI Dropdown.