ng select下載 - ng select原始碼下載

ng select

其他源碼

v14.0.0

下載

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	v5.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

特徵

警告

庫正在積極開發中，並且可能會對 1.0.0 之後的後續主要版本進行 API 重大更改。

入門

第 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 和 Angular 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需要告訴系統載入器在哪裡尋找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`	不	允許建立自訂選項。
新增標籤文字	`string`	`Add item`	不	使用標記時設定自訂文本
外貌	`string`	`underline`	不	允許選擇下拉外觀。設定為`outline`以添加邊框而不是下劃線（僅適用於 Material 主題）
附加到	`string`	無效的	不	使用 css 選擇器將下拉清單附加到正文或任何其他元素。為了正確定位`body`應該有`position:relative`
緩衝量	`string`	無效的	不	使用 css 選擇器將下拉清單附加到正文或任何其他元素。為了正確定位`body`應該有`position:relative`
綁定值	`string`	`-`	不	用於選定模型的物件屬性。預設情況下綁定到整個物件。
綁定標籤	`string`	`label`	不	用於標籤的物件屬性。預設`label`
[選擇時關閉]	`boolean`	真的	不	選擇值時是否關閉選單
清除所有文字	`string`	`Clear all`	不	設定自訂文字以清除所有圖示標題
[可清除]	`boolean`	`true`	不	允許清除所選值。預設`true`
[清除退格鍵]	`boolean`	`true`	不	單擊退格鍵時將一一清除所選值。預設`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時允許選擇群組
[可選擇的組別作為模型]	`boolean`	真的	不	指示是否選擇所有子項或群組本身
[專案]	`Array<any>`	`[]`	是的	專案數組
[載入中]	`boolean`	`-`	不	您可以從外部設定載入狀態（例如非同步項目載入）
載入文字	`string`	`Loading...`	不	載入項目時設定自訂文本
標籤ForId	`string`	`-`	不	將控制項與標籤關聯的 ID。
[標記第一]	`boolean`	`true`	不	打開/過濾時將第一個項目標記為焦點。
[正在開啟]	`boolean`	`-`	不	允許手動控制下拉式選單的開啟和關閉。 `true` - 不會關閉。 `false` - 不會開啟。
最大選定項目數	`number`	沒有任何	不	當 multiple = true 時，允許設定選擇的限制數量。
[隱藏已選]	`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`	不	組合開始時是否應過濾項目
[按 Fn 軌跡]	`(item: any) => any`	`null`	不	提供自訂trackBy功能
[新增時清除搜尋]	`boolean`	`true`	不	選擇項目後清除搜尋輸入。預設`true` 。 closeOnSelect為`false`時預設為`false`
[單擊時取消選擇]	`boolean`	`false`	不	在下拉清單中按一下所選項目時取消選擇該項目。預設`false` 。當multiple為`true`時預設`true`
[可編輯搜尋術語]	`boolean`	`false`	不	如果選擇了選項，則允許編輯搜尋查詢。預設`false` 。僅當 multiple 為`false`時才有效。
[選擇選項卡]	`boolean`	`false`	不	使用選項卡選擇標記的下拉項目。預設`false`
[輸入時開啟]	`boolean`	`true`	不	使用 Enter 鍵開啟下拉式功能表。預設`true`
[提前輸入]	`Subject`	`-`	不	自訂自動完成或進階篩選器。
[最小期限長度]	`number`	`0`	不	開始搜尋的最短術語長度。應該要與`typeahead`一起使用
輸入搜尋文字	`string`	`Type to search`	不	使用 Typeahead 時設定自訂文本
[虛擬滾動]	`boolean`	錯誤的	不	渲染大量資料時啟用虛擬滾動以獲得更好的效能
[輸入屬性]	`{ [key: string]: string }`	`-`	不	將自訂屬性傳遞給底層`input`元素
[標籤索引]	`number`	`-`	不	在 ng-select 上設定 tabindex
[防止右鍵切換]	`boolean`	`false`	不	防止在右鍵時開啟 ng-select
[按鍵向下Fn]	`($event: KeyboardEvent) => bool`	`true`	不	提供自訂keyDown函數。在預設處理程序之前執行。傳回 false 以抑制預設按鍵處理程序的執行

輸出

輸出	描述
（添加）	當`[multiple]="true"`新增項目時觸發。輸出添加的項目
（模糊）	在選擇模糊時觸發
（改變）	因模型變更而被解僱。輸出整個模型
（關閉）	在選擇下拉式選單關閉時觸發
（清除）	點擊清除圖示時觸發
（重點）	在選擇焦點時觸發
(搜尋)	輸入搜尋字詞時觸發。輸出帶有過濾項目的搜尋字詞
（打開）	在選擇下拉式選單開啟時觸發
（消除）	當`[multiple]="true"`時刪除項目時觸發
（滾動）	滾動時觸發。提供目前可用項目的開始和結束索引。可用於在使用者一直捲動到清單底部之前以區塊的形式載入更多項目。
（滾動到結束）	滾動到項目末尾時觸發。可用於以區塊的形式載入更多項目。

方法

姓名	描述
打開	開啟選擇下拉麵板
關閉	關閉選擇下拉麵板
重點	聚焦選擇元素
模糊	模糊選擇元素

其他

姓名	類型	描述
[ngOptionHighlight]	指示	反白選項中的搜尋字詞。接受搜尋詞。應該用在選項元素上。自述文件
NgSelectConfig	配置	NgSelect 組件的配置提供者。您可以注入此服務並提供應用程式範圍的配置。
SELECTION_MODEL_FACTORY	服務	用於 SelectionModel 實作的 DI 令牌。您可以提供更改選擇行為的自訂實作。

自訂選擇邏輯

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 類別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 和 Virtual Scroll。檢查他們令人驚嘆的工作和組件:)

展開

附加信息

版本 v14.0.0
類型其他源碼
更新時間 2024-12-07
大小 492.54KB
來自於 Github

相關應用

GitHub sgrebnov/cordova plugin background download

2024-11-05
wolfs 2024 f llmo ie f lmyz lla dow load ree 7 0p 4 0p a d 10 0p

2024-11-01
Darong Guanbang殼兒影視

2024-07-30
Excel二維表資料轉SELECT CASE 工具v2.0

2022-05-26
php+jQuery實現的ajax三級Select列表選單

2010-07-31
Ng.Net留言板源碼

2009-05-20

爲您推薦

chat.petals.dev

其他源碼

1.0.0
GPT Prompt Templates

其他源碼

1.0.0
GPTyped

其他源碼

GPTyped 1.0.5
waymo open dataset

其他源碼

December 2023 Update
SmartTube

其他源碼

24.71 Stable
Sunamu

其他源碼

Release 2.2.0
waymo open dataset

其他源碼

December 2023 Update
termwind

其他類別

v2.3.0
wp functions

其他類別

1.0.0

相關資訊全部

ng select