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 选择将返回产品的json。

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

Answer 1

通过这样做来实现：

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

Answer 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

预先输出显示对象值

2 个答案: