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

jpmorin · Accepted Answer · 2013-10-11 20:29:25Z

2

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}

edited Oct 11, 2013 at 20:29

answered Oct 11, 2013 at 20:22

jpmorin

6,0182 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jpmorin Over a year ago

If you want $scope.monkey to be only the value of the text property, you have to do `"suggestion.text for suggestion in sample_data".

Collectives™ on Stack Overflow

AngularJS - Directives with Angular UI Bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related