fix: support object value in ng-option (#459)

fixes #414
ng-select · Apr 16, 2018 · 829fea5 · 829fea5
1 parent 6ca1ffb
commit 829fea5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 21 deletions.
diff --git a/demo/app/examples/data-source.component.ts b/demo/app/examples/data-source.component.ts
@@ -68,7 +68,7 @@ import { Observable } from 'rxjs/Observable';
         <button type="button" class="btn btn-secondary btn-sm" (click)="toggleDisabled()">Toggle disabled</button>
         <hr/>
         ---html,true
-        <ng-select [searchable]="false" [(ngModel)]="selectedCarId">
+        <ng-select [(ngModel)]="selectedCarId">
             <ng-option *ngFor="let car of cars" [value]="car.id" [disabled]="car.disabled" >{{car.name}}</ng-option>
             <ng-option [value]="'custom'">Custom</ng-option>
         </ng-select>

diff --git a/src/ng-select/items-list.ts b/src/ng-select/items-list.ts
@@ -208,11 +208,18 @@ export class ItemsList {
     }
 
     mapItem(item: any, index: number): NgOption {
-        const label = this.resolveNested(item, this._ngSelect.bindLabel);
+        let label = '';
+        if (isDefined(item.label)) {
+            label = item.label;
+        } else {
+            label = this.resolveNested(item, this._ngSelect.bindLabel);
+            label = isDefined(label) ? label.toString() : '';
+        }
+        const value = isDefined(item.value) ? item.value : item;
         return {
             index: index,
-            label: isDefined(label) ? label.toString() : '',
-            value: item,
+            label: label,
+            value: value,
             disabled: item.disabled,
             htmlId: newId()
         };

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -24,20 +24,41 @@ import { ConsoleService } from './console.service';
 
 describe('NgSelectComponent', function () {
 
-    describe('Init', () => {
-        it('should map items correctly', fakeAsync(() => {
+    describe('Data source', () => {
+        it('should set items from primitive numbers array', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
-                `<ng-select [searchable]="false"
-                                [clearable]="false"
-                                [items]="[0, 30, 60, 90, 120, 180, 240]"
-                                [(ngModel)]="selectedCityId">
-                    </ng-select>`);
+                `<ng-select [items]="[0, 30, 60, 90, 120, 180, 240]">
+                </ng-select>`);
 
-            fixture.componentInstance.selectedCityId = 0;
             tickAndDetectChanges(fixture);
-            expect(fixture.componentInstance.selectedCityId).toEqual(0);
-            expect(fixture.componentInstance.select.itemsList.items[0].label).toEqual('0');
+            const itemsList = fixture.componentInstance.select.itemsList;
+            expect(itemsList.items.length).toBe(7);
+            expect(itemsList.items[0]).toEqual(jasmine.objectContaining({
+                label: '0',
+                value: 0
+            }));
+        }));
+
+        it('should set ng-option dom elements', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectTestCmp,
+                `<ng-select [(ngModel)]="selectedCityId">
+                    <ng-option [value]="'a'">A</ng-option>
+                    <ng-option [value]="'b'">B</ng-option>
+                </ng-select>`);
+
+            tickAndDetectChanges(fixture);
+            const itemsList = fixture.componentInstance.select.itemsList;
+            expect(itemsList.items.length).toBe(2);
+            expect(itemsList.items[0]).toEqual(jasmine.objectContaining({
+                label: 'A',
+                value: 'a'
+            }));
+            expect(itemsList.items[1]).toEqual(jasmine.objectContaining({
+                label: 'B',
+                value: 'b'
+            }));
         }));
     });
 
@@ -482,6 +503,30 @@ describe('NgSelectComponent', function () {
             discardPeriodicTasks();
         }));
 
+        it('bind to dom ng-option value object', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectTestCmp,
+                `<ng-select [(ngModel)]="selectedCityId">
+                    <ng-option [value]="1">A</ng-option>
+                    <ng-option [value]="2">B</ng-option>
+                </ng-select>`);
+
+            // from component to model
+            selectOption(fixture, KeyCode.ArrowDown, 0);
+            tickAndDetectChanges(fixture);
+            expect(fixture.componentInstance.selectedCityId).toEqual(1);
+
+            // from model to component
+            fixture.componentInstance.selectedCityId = 2
+            tickAndDetectChanges(fixture);
+
+            expect(fixture.componentInstance.select.selectedItems).toEqual([jasmine.objectContaining({
+                value: 2,
+                label: 'B'
+            })]);
+            discardPeriodicTasks();
+        }));
+
         it('should not set internal model when single select ngModel is not valid', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
@@ -1369,10 +1414,10 @@ describe('NgSelectComponent', function () {
             const items = fixture.componentInstance.select.itemsList.items;
             expect(items.length).toBe(2);
             expect(items[0]).toEqual(jasmine.objectContaining({
-                value: { label: 'Yes', value: true, disabled: false }
+                label: 'Yes', value: true, disabled: false
             }));
             expect(items[1]).toEqual(jasmine.objectContaining({
-                value: { label: 'No', value: false, disabled: false }
+                label: 'No', value: false, disabled: false
             }));
         }));
 
@@ -1970,7 +2015,7 @@ describe('NgSelectComponent', function () {
         });
     });
 
-    describe('aria', () => {
+    describe('Accessability', () => {
         let fixture: ComponentFixture<NgSelectTestCmp>;
         let select: NgSelectComponent;
         let input: HTMLInputElement;

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -148,7 +148,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     selectedItemId = 0;
 
     private _defaultLabel = 'label';
-    private _defaultValue = 'value';
     private _typeaheadLoading = false;
     private _primitive: boolean;
     private _compareWith: CompareWithFn;
@@ -454,9 +453,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     private _setItemsFromNgOptions() {
-        this.bindLabel = this.bindLabel || this._defaultLabel;
-        this.bindValue = this.bindValue || this._defaultValue;
-
         const handleNgOptions = (options: QueryList<NgOptionComponent>) => {
             this.items = options.map(option => ({
                 value: option.value,