Angular UI-Bootstrap Typeahead with object literal structure

262 Views Asked by At

Is is possible to use Angular UI-Bootstrap Typeahead with the following data? This data is a representation of a wordpress taxonomy with format term_id : term_name

$scope.domainFields = {
    "304": "Administration et secr\u00e9tariat",
    "305": "Arts, m\u00e9dias et divertissement",
    "306": "Assurance",
    "307": "Comptabilit\u00e9 et finance"
    //...
};

View:

I am using Angular-xeditable typeahead which implements Angular-ui typeahead.

currentUser.field contains the current term_id, how to loop through domainFields object in e-typeahead and display the current term_name associated with term_id?

<a href="#"
   editable-text="currentUser.field"
   e-typeahead="
   term_id as term_name for field in domainFields
   | filter:$viewValue 
   | limitTo:8">
{{ domainFields[currentUser.field] || 'empty' }}
</a>
1

There are 1 best solutions below

2
On

You need to use (key, value) in your object while specifying repeating array in e-typeahead

Markup

<a href="#"
   editable-text="currentUser.field"
   e-typeahead="
   term_id as term_name for (term_id, term_name) in domainFields
   | filter:$viewValue 
   | limitTo:8">
{{ domainFields[currentUser.field] || 'empty' }}
</a>