显示对象值的预输入

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 Object]，但您将能够显示所有详细信息。这样 ng-model selected 将 return 一个 json 的产品。

编辑： https://codepen.io/daniss/pen/zqbzGj

Answer 1

我们需要在角度模块中添加ui.bootstrap。这是代码

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

Answer 2

通过以下操作获得成功：

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

显示对象值的预输入

Typeahead displaying object values

angularjs

bootstrap-typeahead

angular-ui-bootstrap