Typeahead, отображающий значения объекта

Question

Я стараюсь делать предложения по продуктам. Я хочу отобразить на сайте все детали, такие как белок, углеводы, жир. Проблема заключается в том, что я немогу отображать эти данные в 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> 

Это пример того, как один продукт выглядит следующим образом:

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

Если я пытаюсь использовать это вместо:

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

Значением ввода будет [объект Object], но вы сможете отобразить все детали. Таким образом, ng-модель , выбранная, вернет json продукта.

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

Answer 1

Понял работает, выполнив:

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

Answer 2

Нам нужно добавить ui.bootstrap в angualar модуле. Вот код

// 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"> 

код пера: http://codepen.io/Prabhaker/pen/EKMmVZ