AngularJS - Directives with Angular UI Bootstrap

Question

I'm using Angular UI - Bootstrap, specifically the Typeahead directive. http://angular-ui.github.io/bootstrap/#/typeahead

I'm attempting to use the 'typeahead-template-url' to create custom html templates for my suggestion boxes. After trying multiple techniques, unsuccessfully, I discovered that by purposely messing up my quotation marks 'solved' the display issues. I would love to understand why this is breaking and get it working properly.

For example: this works

<table class="> <!--see class quote error --> <tr> <td> <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)"> <a>ID{{ match.model.id }} - {{ match.model.text }}</a> </div> </td> </tr> </table> 

This DOESN'T WORK

<table class=""> <tr> <td> <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)"> <a>ID{{ match.model.id }} - {{ match.model.text }}</a> </div> </td> </tr> </table> 

FIDDLE is here: http://jsfiddle.net/nicktest222/JXtaZ/24/

Additionally, when you select an item in the results list, it returns the entire object. How can I get it to return a specific property in the object?

Any help would be greatly appreciated.

Thanks

Answer 1

I think it is the way you add your template (columnTwo.html) in JSFiddle.

Look at my demo (which is based on yours): http://jsbin.com/aMOrOra/1/edit?html,js,output

As for the typeahead property:

<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion as suggestion.text for suggestion in sample_data | filter: $viewValue" /> 

Here it means that the suggestion object is used as the selected value, but I want to display only the suggestion.text property in the box. But monkey will still be set to the selected suggestion object.

Just so you know, your current filter will look for the query on every properties of the suggestion object, not only text.

EDIT: To filter only the text property, use the filter like this:

filter:{'text':$viewValue}