Typeahead affichant des valeurs d'objet

Question

J'essaye de faire des suggestions sur des produits. Je veux montrer tous les détails comme la protéine, les glucides, la graisse sur le site Web. Le problème est que je ne peux pas afficher ces détails Html:

<input class="form-control" type="text" ng-model="selected" uib-typeahead="product.name for product in products | filter:$viewValue | limitTo:10"> 
<p>selected item has : {{ selected.protein }} protein</p> 
<p>selected item has : {{ selected.fat }} fat</p> 
<p>selected item has : {{ selected.carbs }} carbs</p> 

Voici un exemple de la façon dont un seul produit ressemble à:

{ 
    "id": 2, 
    "name": "soup", 
    "protein": 1.12, 
    "fat": 1.16, 
    "carbs": 8.45, 
    "cholesterol": 0, 
    "type": "soup" 
} 

Si j'essayer d'utiliser cette place:

uib-typeahead="product for product in products | filter:$viewValue | limitTo:10" 

La valeur de l'entrée sera [objet objet] mais vous pourrez afficher tous les détails. De cette façon, le modèle ng sélectionné renverra un fichier JSON du produit.

EDIT:https://codepen.io/daniss/pen/zqbzGj

Answer 1

obtenu ce travail en faisant:

uib-typeahead="product as product.name for product in products | filter:$viewValue | limitTo:10" 

Answer 2

Nous devons ajouter ui.bootstrap dans le module angualar. Voici le code

// setup app and pass ui.bootstrap as dep 
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]); 

// setup controller and pass data source 
myApp.controller("TypeaheadCtrl", function($scope) { 

    $scope.selected = undefined; 

    $scope.products = [{"name": "Prabhaker"},{"name": "Prabhash"},{"name": "Prakash"}]; 

}); 

<input name="products" id="products" type="text" placeholder="enter a product" ng-model="selected" typeahead="product.name for product in products | filter:$viewValue | limitTo:8" class="form-control"> 

stylo code: http://codepen.io/Prabhaker/pen/EKMmVZ