feat: support for simple arrays (ng-select#129)

* feat: support for simple arrays closes ng-select#100
jakemdunn · Nov 20, 2017 · ec860cb · ec860cb
1 parent b37bfee
commit ec860cb
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 31 deletions.
diff --git a/ng-select/items-list.ts b/ng-select/items-list.ts
@@ -9,8 +9,7 @@ export class ItemsList {
     private _markedIndex = -1;
     private _selected: NgOption[] = [];
     private _multiple = false;
-    private _bindLabel: string;
-    private _bindValue: string;
+    private _simple = false;
 
     get value(): NgOption[] {
         return this._selected;
@@ -20,7 +19,8 @@ export class ItemsList {
         return this.filteredItems[this._markedIndex];
     }
 
-    setItems(items: NgOption[]) {
+    setItems(items: NgOption[], simple: boolean = false) {
+        this._simple = simple;
         this.items = this.mapItems(items);
         this.filteredItems = [...this.items];
     }
@@ -30,12 +30,6 @@ export class ItemsList {
         this.clearSelected();
     }
 
-    setBindOptions(bindLabel: string, bindValue: string) {
-        this._bindLabel = bindLabel;
-        this._bindValue = bindValue;
-    }
-
-
     select(item: NgOption) {
         if (!this._multiple) {
             this.clearSelected();
@@ -44,16 +38,16 @@ export class ItemsList {
         item.selected = true;
     }
 
-    findItem(value): NgOption {
+    findItem(value, bindValue: string, bindLabel: string): NgOption {
         if (!value) {
             return null;
         }
-        if (this._bindValue) {
-            return this.items.find(x => x[this._bindValue] === value);
+        if (bindValue) {
+            return this.items.find(x => x[bindValue] === value);
         }
         const index = this.items.indexOf(value);
         return index > -1 ? this.items[index] :
-            this.items.find(x => x[this._bindLabel] === value[this._bindLabel])
+            this.items.find(x => x[bindLabel] === value[bindLabel])
     }
 
     unselect(item: NgOption) {
@@ -148,9 +142,15 @@ export class ItemsList {
 
     private mapItems(items: NgOption[]) {
         return items.map((item, index) => {
+            let option = item;
+            if (this._simple) {
+                option = {};
+                option['label'] = item as any;
+            }
+
             return {
                 index: index,
-                ...item
+                ...option
             };
         })
     }

diff --git a/ng-select/ng-select.component.spec.ts b/ng-select/ng-select.component.spec.ts
@@ -193,6 +193,21 @@ describe('NgSelectComponent', function () {
             discardPeriodicTasks();
         }));
 
+        it('bind to simple array', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectSimpleCmp,
+                `<ng-select [items]="cities"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            selectOption(fixture, KeyCode.ArrowDown, 0);
+            tickAndDetectChanges(fixture);
+            expect(fixture.componentInstance.selectedCity).toBe('Vilnius');
+            fixture.componentInstance.selectedCity = 'Kaunas';
+            tickAndDetectChanges(fixture);
+            expect(fixture.componentInstance.select.selectedItems).toEqual([jasmine.objectContaining({ label: 'Kaunas' })]);
+        }));
+
         it('bind to object', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectBasicTestCmp,
@@ -994,6 +1009,15 @@ class NgSelectSelectedSimpleCmp {
     ];
 }
 
+@Component({
+    template: ``
+})
+class NgSelectSimpleCmp {
+    @ViewChild(NgSelectComponent) select: NgSelectComponent;
+    cities = ['Vilnius', 'Kaunas', 'Pabrade'];
+    selectedCity;
+}
+
 @Component({
     template: ``
 })

diff --git a/ng-select/ng-select.component.ts b/ng-select/ng-select.component.ts
@@ -18,6 +18,7 @@ import {
     ElementRef,
     ChangeDetectionStrategy,
     Optional,
+    SimpleChanges,
     Renderer2, ContentChildren, QueryList
 } from '@angular/core';
 
@@ -57,7 +58,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
 
     // inputs
     @Input() items = [];
-    @Input() bindLabel = 'label';
+    @Input() bindLabel: string;
     @Input() bindValue: string;
     @Input() clearable = true;
     @Input() disableVirtualScroll = false;
@@ -102,6 +103,9 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     filterValue: string = null;
 
     private _ngModel = null;
+    private _simple = false;
+    private _defaultLabel = 'label';
+    private _defaultValue = 'value';
 
     private onChange = (_: NgOption) => { };
     private onTouched = () => { };
@@ -121,8 +125,21 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         this.mergeGlobalConfig(config);
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.multiple) {
+            this.itemsList.setMultiple(changes.multiple.currentValue);
+        }
+        if (changes.items) {
+            this.setItems(changes.items.currentValue || []);
+        }
+    }
+
     ngOnInit() {
         this.handleDocumentClick();
+        this.bindLabel = this.bindLabel || this._defaultLabel;
+        if (this._simple) {
+            this.bindValue = this._defaultLabel;
+        }
     }
 
     ngAfterViewInit() {
@@ -131,18 +148,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         }
     }
 
-    ngOnChanges(changes) {
-        if (changes.bindLabel || changes.bindValue) {
-            this.itemsList.setBindOptions(this.bindLabel, this.bindValue);
-        }
-        if (changes.multiple) {
-            this.itemsList.setMultiple(changes.multiple.currentValue);
-        }
-        if (changes.items) {
-            this.setItems(changes.items.currentValue || []);
-        }
-    }
-
     ngOnDestroy() {
         this.changeDetectorRef.detach();
         this.disposeDocumentClickListener();
@@ -277,7 +282,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
 
     selectTag() {
         let tag = {}
-
         if (this.addTag instanceof Function) {
             tag = this.addTag(this.filterValue);
         } else {
@@ -351,7 +355,9 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     }
 
     private setItems(items: NgOption[]) {
-        this.itemsList.setItems(items);
+        const firstItem = items[0];
+        this._simple = firstItem && !(firstItem instanceof Object);
+        this.itemsList.setItems(items, this._simple);
         if (this._ngModel) {
             this.itemsList.clearSelected();
             this.selectWriteValue(this._ngModel);
@@ -365,7 +371,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     private setItemsFromNgOptions() {
         if (!this.bindValue) {
             this.bindValue = 'value';
-            this.itemsList.setBindOptions(this.bindLabel, this.bindValue);
         }
 
         const handleNgOptions = (options) => {
@@ -439,7 +444,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         }
 
         const select = (val: any) => {
-            let item = this.itemsList.findItem(val);
+            let item = this.itemsList.findItem(val, this.bindValue, this.bindLabel);
             if (item) {
                 this.itemsList.select(item);
             } else {