fix(tagsInput): Fix display of non-string items

Fix getDisplayText() function in both tagsInput and autoComplete
directives so that non-string items are correctly displayed.

Closes #150

.jshintrc

@@ -32,6 +32,7 @@
         "SimplePubSub": true,
         "makeObjectArray": true,
         "findInObjectArray": true,
+        "safeToString": true,
         "replaceAll" : true,
         "KEYS": true,
         "generateArray": true,

src/auto-complete.js

@@ -110,7 +110,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
         templateUrl: 'ngTagsInput/auto-complete.html',
         link: function(scope, element, attrs, tagsInputCtrl) {
             var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
-                suggestionList, tagsInput, options, getItemText, documentClick;
+                suggestionList, tagsInput, options, getItem, getDisplayText, documentClick;
 
             tagsInputConfig.load('autoComplete', scope, attrs, {
                 debounceDelay: [Number, 100],
@@ -126,10 +126,14 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
 
             suggestionList = new SuggestionList(scope.source, options);
 
-            getItemText = function(item) {
+            getItem = function(item) {
                 return item[options.tagsInput.displayProperty];
             };
 
+            getDisplayText = function(item) {
+                return safeToString(getItem(item));
+            };
+
             scope.suggestionList = suggestionList;
 
             scope.addSuggestion = function() {
@@ -146,7 +150,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
             };
 
             scope.highlight = function(item) {
-                var text = getItemText(item);
+                var text = getDisplayText(item);
                 text = encodeHTML(text);
                 if (options.highlightMatchedText) {
                     text = replaceAll(text, encodeHTML(suggestionList.query), '<em>$&</em>');
@@ -155,7 +159,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
             };
 
             scope.track = function(item) {
-                return getItemText(item);
+                return getItem(item);
             };
 
             tagsInput

src/tags-input.js

@@ -206,7 +206,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
             scope.newTag = { text: '', invalid: null };
 
             scope.getDisplayText = function(tag) {
-                return tag[options.displayProperty].trim();
+                return safeToString(tag[options.displayProperty]);
             };
 
             scope.track = function(tag) {

src/util.js

@@ -37,7 +37,7 @@ function findInObjectArray(array, obj, key) {
     for (var i = 0; i < array.length; i++) {
         // I'm aware of the internationalization issues regarding toLowerCase()
         // but I couldn't come up with a better solution right now
-        if (array[i][key].toLowerCase() === obj[key].toLowerCase()) {
+        if (safeToString(array[i][key]).toLowerCase() === safeToString(obj[key]).toLowerCase()) {
             item = array[i];
             break;
         }
@@ -48,4 +48,8 @@ function findInObjectArray(array, obj, key) {
 function replaceAll(str, substr, newSubstr) {
     var expression = substr.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     return str.replace(new RegExp(expression, 'gi'), newSubstr);
+}
+
+function safeToString(value) {
+    return angular.isUndefined(value) || value == null ? '' : value.toString().trim();
 }

test/auto-complete.spec.js

@@ -134,6 +134,29 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(1)).toBe('Item2');
         });
 
+        it('renders all elements returned by the load function that aren\'t already added (non-string items)', function() {
+            // Act
+            tagsInput.getTags.and.returnValue([{ text: '1' }]);
+            loadSuggestions({
+                data: [
+                    { text: 1 },
+                    { text: 1.5 },
+                    { text: true },
+                    { text: {} },
+                    { text: null },
+                    { text: undefined }
+                ]
+            });
+
+            // Assert
+            expect(getSuggestions().length).toBe(5);
+            expect(getSuggestionText(0)).toBe('1.5');
+            expect(getSuggestionText(1)).toBe('true');
+            expect(getSuggestionText(2)).toBe('[object Object]');
+            expect(getSuggestionText(3)).toBe('');
+            expect(getSuggestionText(4)).toBe('');
+        });
+
         it('shows the suggestions list when there are items to show', function() {
             // Act
             loadSuggestions(1);

test/tags-input.spec.js

@@ -117,6 +117,30 @@ describe('tags-input directive', function() {
             expect(getTagText(2)).toBe('Tag3');
         });
 
+        it('renders the correct number of tags (non-string items)', function() {
+            // Arrange
+            $scope.tags = [
+                { text: 1 },
+                { text: true },
+                { text: 1.5 },
+                { text: {} },
+                { text: null },
+                { text: undefined }
+            ];
+
+            // Act
+            compile();
+
+            // Assert
+            expect(getTags().length).toBe(6);
+            expect(getTagText(0)).toBe('1');
+            expect(getTagText(1)).toBe('true');
+            expect(getTagText(2)).toBe('1.5');
+            expect(getTagText(3)).toBe('[object Object]');
+            expect(getTagText(4)).toBe('');
+            expect(getTagText(5)).toBe('');
+        });
+
         it('updates the model', function() {
             // Arrange
             compile();