หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Angular ng-select - น้ำหนักเบาทั้งหมดในการเลือก UI การเลือกหลายรายการและการเติมข้อความอัตโนมัติ

ดูหน้าสาธิต

รุ่นต่างๆ

เชิงมุม ng-เลือก
>=19.0.0 <20.0.0 v14.x
>=18.0.0 <19.0.0 v13.x
>=17.0.0 <18.0.0 v12.x
>=16.0.0 <17.0.0 v11.x
>=15.0.0 <16.0.0 v10.x
>=14.0.0 <15.0.0 v9.x
>=13.0.0 <14.0.0 v8.x
>=12.0.0 <13.0.0 v7.x
>=11.0.0 <12.0.0 v6.x
>=10.0.0 <11.0.0 เวอร์ชัน 5.x
>=9.0.0 <10.0.0 v4.x
>=8.0.0 <9.0.0 v3.x
>=6.0.0 <8.0.0 v2.x
v5.xx v1.x

รองรับเบราว์เซอร์

ng-select รองรับเบราว์เซอร์ทั้งหมดที่รองรับโดย Angular สำหรับรายการปัจจุบัน โปรดดู https://angular.io/guide/browser-support#browser-support ซึ่งรวมถึงเวอร์ชันเฉพาะต่อไปนี้: 

 Chrome	2 most recent versions
Firefox	latest and extended support release (ESR)
Edge	2 most recent major versions
Safari	2 most recent major versions
iOS	2 most recent major versions
Android	2 most recent major versions

สารบัญ

  • คุณสมบัติ
  • เริ่มต้นใช้งาน
  • เอพีไอ
  • การตรวจจับการเปลี่ยนแปลง
  • สไตล์ที่กำหนดเอง
    • สถานะการตรวจสอบ
  • มีส่วนร่วม
  • การพัฒนา
  • แรงบันดาลใจ

คุณสมบัติ

  • การเชื่อมโยงแบบกำหนดเองกับทรัพย์สินหรือวัตถุ
  • ตัวเลือกที่กำหนดเอง เทมเพลตป้ายกำกับ ส่วนหัวและส่วนท้าย
  • รองรับ Virtual Scroll พร้อมชุดข้อมูลขนาดใหญ่ (>5,000 รายการ)
  • เลื่อนไม่มีที่สิ้นสุด
  • การนำทางด้วยแป้นพิมพ์
  • เลือกหลายรายการ
  • การเติมข้อความอัตโนมัติที่ยืดหยุ่นพร้อมการกรองไคลเอ็นต์/เซิร์ฟเวอร์
  • การค้นหาที่กำหนดเอง
  • แท็กที่กำหนดเอง
  • ผนวกเข้ากับ
  • รายการกลุ่ม
  • เหตุการณ์เอาท์พุต
  • การเข้าถึง
  • ความครอบคลุมการทดสอบฟังก์ชันพื้นฐานที่ดี
  • ธีมส์

คำเตือน

ไลบรารีอยู่ระหว่างการพัฒนาและอาจมีการเปลี่ยนแปลง API สำหรับเวอร์ชันหลักที่ตามมาหลังจาก 1.0.0

เริ่มต้นใช้งาน

ขั้นตอนที่ 1: ติดตั้ง ng-select :

เอ็นพีเอ็ม 

npm install --save @ng-select/ng-select

เส้นด้าย 

yarn add @ng-select/ng-select

ขั้นตอนที่ 2:

แบบสแตนด์อโลน: นำเข้า NgSelectComponent และคำสั่งที่จำเป็นอื่นๆ โดยตรง: 

 import { NgLabelTemplateDirective , NgOptionTemplateDirective , NgSelectComponent } from '@ng-select/ng-select' ;
import { FormsModule } from '@angular/forms' ;

@ Component ( {
  selector : 'example' ,
  standalone : true ,
  template : './example.component.html' ,
  styleUrl : './example.component.scss' ,
  imports : [
    NgLabelTemplateDirective ,
    NgOptionTemplateDirective ,
    NgSelectComponent ,
  ] ,
} )
export class ExampleComponent { }

NgModule: นำเข้าโมดูล NgSelectModule และ FormsModule เชิงมุม: 

 import { NgSelectModule } from '@ng-select/ng-select' ;
import { FormsModule } from '@angular/forms' ;

@ NgModule ( {
  declarations : [ AppComponent ] ,
  imports : [ NgSelectModule , FormsModule ] ,
  bootstrap : [ AppComponent ]
} )
export class AppModule { }

ขั้นตอนที่ 3: รวมธีม:

เพื่อให้สามารถปรับแต่งและกำหนดธีมได้ บันเดิล ng-select จะรวมเฉพาะสไตล์ทั่วไปที่จำเป็นสำหรับเค้าโครงและตำแหน่งที่ถูกต้อง เพื่อให้การควบคุมดูสมบูรณ์ ให้รวมหนึ่งในธีมในแอปพลิเคชันของคุณ หากคุณใช้ Angular CLI คุณสามารถเพิ่มสิ่งนี้ลงใน styles.scss ของคุณ หรือรวมไว้ใน .angular-cli.json (Angular v5 และต่ำกว่า) หรือ angular.json (Angular v6 เป็นต้นไป) 

 @import " ~@ng-select/ng-select/themes/default.theme.css " ;
// ... or 
@import " ~@ng-select/ng-select/themes/material.theme.css " ;

ขั้นตอนที่ 4 (ทางเลือก): การกำหนดค่า

คุณยังสามารถตั้งค่าข้อความการกำหนดค่าและการแปลทั่วโลกได้โดยการฉีดบริการ NgSelectConfig ซึ่งโดยทั่วไปจะอยู่ในองค์ประกอบรากของคุณ และปรับแต่งค่าของคุณสมบัติเพื่อให้เป็นค่าเริ่มต้น 

  constructor ( private config : NgSelectConfig ) {
      this . config . notFoundText = 'Custom not found' ;
      this . config . appendTo = 'body' ;
      // set the bindValue to global config when you use the same 
      // bindValue in most of the place. 
      // You can also override bindValue for the specified template 
      // by defining `bindValue` as property
      // Eg : <ng-select bindValue="some-new-value"></ng-select>
      this . config . bindValue = 'value' ;
  }

การใช้งาน

กำหนดตัวเลือกในส่วนประกอบการบริโภคของคุณ: 

@ Component ( { ... } )
export class ExampleComponent {

    selectedCar : number ;

    cars = [
        { id : 1 , name : 'Volvo' } ,
        { id : 2 , name : 'Saab' } ,
        { id : 3 , name : 'Opel' } ,
        { id : 4 , name : 'Audi' } ,
    ] ;
}

ในเทมเพลตให้ใช้องค์ประกอบ ng-select พร้อมตัวเลือกของคุณ 

 <!--Using ng-option and for loop-->
< ng-select [(ngModel)] =" selectedCar " >
    @for (car of cars; track car.id) {
        < ng-option [value] =" car.id " > {{car.name}} </ ng-option >
    }
</ ng-select >

<!--Using items input-->
< ng-select [items] =" cars " 
           bindLabel =" name " 
           bindValue =" id " 
           [(ngModel)] =" selectedCar " >
</ ng-select >

สำหรับตัวอย่างโดยละเอียดเพิ่มเติม โปรดดูที่หน้าสาธิต

ระบบJS

หากคุณใช้ SystemJS คุณควรปรับการกำหนดค่าของคุณให้ชี้ไปที่บันเดิล UMD

ในไฟล์กำหนดค่า systemjs ของคุณ map จำเป็นต้องบอก System loader ว่าจะค้นหา ng-select ได้ที่ไหน : 

map: {
  '@ng-select/ng-select' : 'node_modules/@ng-select/ng-select/bundles/ng-select.umd.js' ,
}

เอพีไอ

อินพุต

ป้อนข้อมูล พิมพ์ ค่าเริ่มต้น ที่จำเป็น คำอธิบาย
[เพิ่มแท็ก] boolean | ((term: string) => any | Promise<any>) false เลขที่ อนุญาตให้สร้างตัวเลือกที่กำหนดเอง
addTagText string Add item เลขที่ ตั้งค่าข้อความที่กำหนดเองเมื่อใช้การแท็ก
รูปร่าง string underline เลขที่ อนุญาตให้เลือกลักษณะที่ปรากฏแบบเลื่อนลง ตั้งค่าเป็น outline เพื่อเพิ่มเส้นขอบแทนการขีดเส้นใต้ (ใช้กับธีม Material เท่านั้น)
ผนวกไปที่ string โมฆะ เลขที่ เพิ่มเมนูแบบเลื่อนลงต่อท้ายเนื้อหาหรือองค์ประกอบอื่นๆ โดยใช้ตัวเลือก CSS สำหรับการวางตำแหน่ง body ที่ถูกต้องควรมี position:relative
บัฟเฟอร์จำนวน string โมฆะ เลขที่ เพิ่มเมนูแบบเลื่อนลงต่อท้ายเนื้อหาหรือองค์ประกอบอื่นๆ โดยใช้ตัวเลือก CSS สำหรับการวางตำแหน่ง body ที่ถูกต้องควรมี position:relative
ผูกค่า string - เลขที่ คุณสมบัติวัตถุที่จะใช้สำหรับรุ่นที่เลือก โดยค่าเริ่มต้นจะผูกกับวัตถุทั้งหมด
ผูกฉลาก string label เลขที่ คุณสมบัติอ็อบเจ็กต์ที่จะใช้สำหรับป้ายกำกับ label เริ่มต้น
[ปิดเลือก] boolean จริง เลขที่ จะปิดเมนูเมื่อมีการเลือกค่าหรือไม่
clearAllText string Clear all เลขที่ ตั้งค่าข้อความที่กำหนดเองเพื่อล้างชื่อไอคอนทั้งหมด
[เคลียร์ได้] boolean true เลขที่ อนุญาตให้ล้างค่าที่เลือก ค่าเริ่มต้น true
[เคลียร์OnBackspace] boolean true เลขที่ ล้างค่าที่เลือกทีละค่าเมื่อคลิก Backspace ค่าเริ่มต้น true
[เปรียบเทียบกับ] (a: any, b: any) => boolean (a, b) => a === b เลขที่ ฟังก์ชันเพื่อเปรียบเทียบค่าตัวเลือกกับค่าที่เลือก อาร์กิวเมนต์แรกคือค่าจากตัวเลือก ประการที่สองคือค่าจากการเลือก (รุ่น) ควรส่งคืนบูลีน
ตำแหน่งแบบเลื่อนลง bottom | top | auto auto เลขที่ ตั้งค่าตำแหน่งแบบเลื่อนลงเมื่อเปิด
[ตัวยึดตำแหน่งคงที่] boolean false เลขที่ ตั้งค่าตัวยึดตำแหน่งให้มองเห็นได้แม้ว่าจะเลือกรายการแล้วก็ตาม
[กลุ่มโดย] string | Function โมฆะ เลขที่ อนุญาตให้จัดกลุ่มรายการตามนิพจน์คีย์หรือฟังก์ชัน
[ค่ากลุ่ม] (groupKey: string, children: any[]) => Object - เลขที่ นิพจน์ฟังก์ชันเพื่อให้ค่ากลุ่ม
[กลุ่มที่เลือกได้] boolean เท็จ เลขที่ อนุญาตให้เลือกกลุ่มเมื่อใช้ groupBy
[เลือก GroupAsModel] boolean จริง เลขที่ ระบุว่าจะเลือกรายการย่อยทั้งหมดหรือทั้งกลุ่ม
[รายการ] Array<any> [] ใช่ อาร์เรย์รายการ
[กำลังโหลด] boolean - เลขที่ คุณสามารถตั้งค่าสถานะการโหลดได้จากภายนอก (เช่น การโหลดรายการ async)
กำลังโหลดข้อความ string Loading... เลขที่ ตั้งค่าข้อความที่กำหนดเองเมื่อโหลดรายการ
labelForId string - เลขที่ รหัสเพื่อเชื่อมโยงการควบคุมกับป้ายกำกับ
[มาร์คเฟิร์ส] boolean true เลขที่ ทำเครื่องหมายรายการแรกว่าโฟกัสอยู่เมื่อเปิด/กรอง
[เปิดอยู่] boolean - เลขที่ ช่วยให้สามารถควบคุมการเปิดและปิดแบบเลื่อนลงด้วยตนเอง true - จะไม่ปิด false - จะไม่เปิด
maxSelectedItems number ไม่มี เลขที่ เมื่อหลายรายการ = จริง อนุญาตให้กำหนดจำนวนการเลือกที่จำกัด
[ซ่อนรายการที่เลือก] boolean false เลขที่ อนุญาตให้ซ่อนรายการที่เลือก
[หลายรายการ] boolean false เลขที่ อนุญาตให้เลือกหลายรายการ
ไม่พบข้อความ string No items found เลขที่ ตั้งค่าข้อความที่กำหนดเองเมื่อตัวกรองส่งคืนผลลัพธ์ที่ว่างเปล่า
ตัวยึดตำแหน่ง string - เลขที่ ข้อความตัวยึดตำแหน่ง
[ค้นหาได้] boolean true เลขที่ อนุญาตให้ค้นหาค่า ค่าเริ่มต้น true
[อ่านอย่างเดียว] boolean false เลขที่ ตั้งค่า ng-select เป็นแบบอ่านอย่างเดียว ส่วนใหญ่จะใช้กับรูปแบบปฏิกิริยา
[ค้นหาFn] (term: string, item: any) => boolean null เลขที่ อนุญาตให้กรองตามฟังก์ชันการค้นหาที่กำหนดเอง
[ค้นหาขณะเขียน] boolean true เลขที่ ควรกรองรายการในขณะที่เริ่มองค์ประกอบหรือไม่
[trackByFn] (item: any) => any null เลขที่ จัดเตรียมฟังก์ชัน trackBy แบบกำหนดเอง
[ล้างการค้นหาบนเพิ่ม] boolean true เลขที่ ล้างข้อมูลการค้นหาเมื่อเลือกรายการ ค่าเริ่มต้น true ค่าเริ่มต้น false เมื่อ closeOnSelect เป็น false
[ยกเลิกการเลือกOnClick] boolean false เลขที่ ยกเลิกการเลือกรายการที่เลือกเมื่อมีการคลิกในรายการแบบเลื่อนลง ค่าเริ่มต้น false ค่าเริ่มต้น true เมื่อ หลายรายการ เป็น true
[คำค้นหาที่แก้ไขได้] boolean false เลขที่ อนุญาตให้แก้ไขคำค้นหาหากเลือกตัวเลือกไว้ ค่าเริ่มต้น false ใช้งานได้เฉพาะในกรณีที่หลายรายการเป็น false
[เลือกบนแท็บ] boolean false เลขที่ เลือกรายการแบบเลื่อนลงที่ทำเครื่องหมายไว้โดยใช้แท็บ ค่าเริ่มต้น false
[openOnEnter] boolean true เลขที่ เปิดดรอปดาวน์โดยใช้ Enter ค่าเริ่มต้น true
[พิมพ์ข้างหน้า] Subject - เลขที่ เติมข้อความอัตโนมัติหรือตัวกรองขั้นสูงแบบกำหนดเอง
[ขั้นต่ำTermLength] number 0 เลขที่ ระยะเวลาขั้นต่ำเพื่อเริ่มการค้นหา ควรใช้ร่วมกับ typeahead
พิมพ์ ToSearchText string Type to search เลขที่ ตั้งค่าข้อความที่กำหนดเองเมื่อใช้ Typeahead
[เลื่อนเสมือน] boolean เท็จ เลขที่ เปิดใช้งานการเลื่อนเสมือนเพื่อประสิทธิภาพที่ดีขึ้นเมื่อแสดงผลข้อมูลจำนวนมาก
[อินพุตAttrs] { [key: string]: string } - เลขที่ ส่งผ่านแอตทริบิวต์ที่กำหนดเองไปยังองค์ประกอบ input ที่ซ่อนอยู่
[ดัชนีแท็บ] number - เลขที่ ตั้งค่า tabindex บน ng-select
[ป้องกัน ToggleOnRightClick] boolean false เลขที่ ป้องกันการเปิด ng-select เมื่อคลิกเมาส์ขวา
[คีย์DownFn] ($event: KeyboardEvent) => bool true เลขที่ ให้ฟังก์ชัน keyDown แบบกำหนดเอง ดำเนินการก่อนตัวจัดการเริ่มต้น ส่งคืนค่าเท็จเพื่อระงับการดำเนินการของตัวจัดการคีย์ดาวน์เริ่มต้น

เอาท์พุต

เอาท์พุต คำอธิบาย
(เพิ่ม) เริ่มทำงานเมื่อมีการเพิ่มรายการในขณะที่ [multiple]="true" เอาท์พุทรายการที่เพิ่ม
(เบลอ) เริ่มทำงานเมื่อเลือกภาพเบลอ
(เปลี่ยน) เริ่มทำงานเมื่อเปลี่ยนโมเดล เอาท์พุตทั้งโมเดล
(ปิด) เริ่มทำงานเมื่อเลือกปิดแบบเลื่อนลง
(ชัดเจน) ยิงเมื่อคลิกไอคอนที่ชัดเจน
(จุดสนใจ) เริ่มทำงานเมื่อเลือกโฟกัส
(ค้นหา) เริ่มทำงานขณะพิมพ์ข้อความค้นหา ส่งออกคำค้นหาพร้อมรายการที่กรอง
(เปิด) เริ่มทำงานเมื่อเปิดเมนูแบบเลื่อนลงที่เลือก
(ลบ) เริ่มทำงานเมื่อมีการลบรายการในขณะที่ [multiple]="true"
(เลื่อน) เริ่มทำงานเมื่อเลื่อน ให้ดัชนีเริ่มต้นและสิ้นสุดของรายการที่มีอยู่ในปัจจุบัน สามารถใช้สำหรับการโหลดรายการเพิ่มเติมเป็นชิ้นก่อนที่ผู้ใช้จะเลื่อนไปจนสุดด้านล่างของรายการ
(เลื่อนไปที่สิ้นสุด) เริ่มทำงานเมื่อเลื่อนไปยังจุดสิ้นสุดของรายการ สามารถใช้สำหรับบรรจุสิ่งของเป็นชิ้น ๆ ได้มากขึ้น

วิธีการ

ชื่อ คำอธิบาย
เปิด เปิดแผงแบบเลื่อนลงที่เลือก
ปิด ปิดแผงดรอปดาวน์ที่เลือก
จุดสนใจ โฟกัสองค์ประกอบที่เลือก
เบลอ เบลอองค์ประกอบที่เลือก

อื่น

ชื่อ พิมพ์ คำอธิบาย
[ngOptionไฮไลท์] คำสั่ง เน้นคำค้นหาในตัวเลือก ยอมรับคำค้นหา ควรใช้กับองค์ประกอบตัวเลือก อ่านฉัน
NgSelectConfig การกำหนดค่า ผู้ให้บริการการกำหนดค่าสำหรับส่วนประกอบ NgSelect คุณสามารถแทรกบริการนี้และจัดเตรียมการกำหนดค่าทั่วทั้งแอปพลิเคชันได้
SELECTION_MODEL_FACTORY บริการ โทเค็น DI สำหรับการใช้งาน SelectionModel คุณสามารถจัดเตรียมพฤติกรรมการเลือกการเปลี่ยนแปลงการใช้งานแบบกำหนดเองได้

ตรรกะการเลือกแบบกำหนดเอง

Ng-select อนุญาตให้จัดเตรียมการเลือกแบบกำหนดเองโดยใช้ SELECTION_MODEL_FACTORY หากต้องการแทนที่ตรรกะเริ่มต้นให้ระบุวิธีการจากโรงงานในโมดูลเชิงมุมของคุณ 

 // app.module.ts
providers: [
    { provide : SELECTION_MODEL_FACTORY , useValue : < SelectionModelFactory > CustomSelectionFactory }
]

// selection-model.ts
export function CustomSelectionFactory ( ) {
    return new CustomSelectionModel ( ) ;
}

export class CustomSelectionModel implements SelectionModel {
    ...
}

การตรวจจับการเปลี่ยนแปลง

องค์ประกอบ Ng-select ใช้การตรวจจับการเปลี่ยนแปลง OnPush ซึ่งหมายความว่าการตรวจสอบสกปรกสำหรับประเภทข้อมูลที่ไม่เปลี่ยนรูป นั่นหมายความว่าหากคุณทำการเปลี่ยนแปลงแบบวัตถุเช่น: 

 this . items . push ( { id : 1 , name : 'New item' } )

ส่วนประกอบจะไม่ตรวจพบการเปลี่ยนแปลง คุณต้องทำแทน: 

 this . items = [ ... this . items , { id : 1 , name : 'New item' } ] ;

นี่จะทำให้ส่วนประกอบตรวจพบการเปลี่ยนแปลงและอัปเดต บางคนอาจมีความกังวลว่าการดำเนินการนี้มีราคาแพง อย่างไรก็ตาม มีประสิทธิภาพมากกว่าการรัน ngDoCheck และกระจายอาร์เรย์อย่างต่อเนื่อง

สไตล์ที่กำหนดเอง

หากคุณไม่พอใจกับสไตล์เริ่มต้น คุณสามารถแทนที่สไตล์เหล่านั้นโดยเพิ่มความเฉพาะเจาะจงของตัวเลือกหรือสร้างธีมของคุณเองได้อย่างง่ายดาย สิ่งนี้มีผลหากคุณใช้ไม่มี ViewEncapsulation หรือเพิ่มสไตล์ให้กับสไตล์ชีตส่วนกลาง เช่น 

 < ng-select class =" custom " > </ ng-select > 
. ng-select . custom {
    border : 0 px ;
    min-height : 0 px ;
    border-radius : 0 ;
}
. ng-select . custom . ng-select-container  {            
    min-height : 0 px ;
    border-radius : 0 ;
}

หากคุณใช้ ViewEncapsulation คุณสามารถใช้ตัวเลือกพิเศษ ::ng-deep ซึ่งจะป้องกันการกำหนดขอบเขตสำหรับตัวเลือกที่ซ้อนกัน แม้ว่านี่จะเป็นวิธีแก้ปัญหามากกว่า และเราขอแนะนำให้ใช้วิธีแก้ปัญหาที่อธิบายไว้ข้างต้น 

. ng-select . custom :: ng-deep . ng-select-container  {            
    min-height : 0 px ;
    border-radius : 0 ;
}

คำเตือน: โปรดทราบว่า ng-deep เลิกใช้แล้วและยังไม่มีทางเลือกอื่น ดูที่นี่

สถานะการตรวจสอบ

ตามค่าเริ่มต้นเมื่อคุณใช้ตัวตรวจสอบแบบฟอร์มเชิงโต้ตอบหรือตัวตรวจสอบแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต css class ng-invalid จะถูกนำไปใช้กับ ng-select คุณสามารถแสดงสถานะข้อผิดพลาดได้โดยการเพิ่มสไตล์ CSS ที่กำหนดเอง 

 ng-select . ng-invalid . ng-touched . ng-select-container {
    border-color : # dc3545 ;
    box-shadow : inset 0 1 px 1 px rgba ( 0 , 0 , 0 , 0.075 ) , 0 0 0 3 px # fde6e8 ;
}

มีส่วนร่วม

ยินดีบริจาค คุณสามารถเริ่มต้นด้วยการดูปัญหาเกี่ยวกับป้าย กำกับที่ต้องการความช่วยเหลือ หรือสร้างปัญหาใหม่ด้วยข้อเสนอหรือรายงานข้อบกพร่อง โปรดทราบว่าเรากำลังใช้รูปแบบ https://conventionalcommits.org/

การพัฒนา

ทำตามขั้นตอน โคลนเพื่อเปิดใช้งาน ด้วยคำสั่งเทอร์มินัลเหล่านี้

เรียกใช้หน้าสาธิตในโหมดดู 

 git clone https://github.com/ng-select/ng-select
cd ng-select
yarn
yarn run start

การทดสอบ 

 yarn run test
or
yarn run test:watch

ปล่อย

หากต้องการปล่อยเป็น npm เพียงแค่รัน ./release.sh แน่นอนหากคุณมีสิทธิ์ ;)

แรงบันดาลใจ

ส่วนประกอบนี้ได้รับแรงบันดาลใจจาก React select และการเลื่อนเสมือน ตรวจสอบงานและส่วนประกอบที่น่าทึ่งของพวกเขา :)

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด