Typeahead 显示对象值答案

【问题标题】：Typeahead displaying object valuesTypeahead 显示对象值
【发布时间】：2016-05-10 23:27:51
【问题描述】：

我正在尝试对产品提出建议。我想在网站上显示所有细节，如蛋白质、碳水化合物、脂肪。问题是我无法在 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 将返回产品的 json。

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

【问题讨论】：

标签： angularjs angular-ui-bootstrap bootstrap-typeahead

【解决方案1】：

通过做得到它的工作：

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

【讨论】：

【解决方案2】：

我们需要在 angualar 模块中添加 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

【讨论】：

ui.bootstrap 对我来说工作正常，因为我已经有了它。我只想显示 2 个以上的 json 数据值。让我更新代码。