Angular Typeahead 需要捕获对象

【问题标题】：Angular Typeahead needs to capture objectAngular Typeahead 需要捕获对象
【发布时间】：2015-01-03 11:30:46
【问题描述】：

我正在尝试使用 Angular Typeahead，我尝试呈现的数据来自 $http 调用。它是一个对象数组，例如 [{"abbrev":"FL", "state":"Florida"}, {"abbrev":"VA", {"state":"Virginia"}]。 html看起来像这样

<input type="text" ng-model="selected" typeahead="item.state for item in states" typeahead-editable="false" />.

该控件的工作原理是它从 Web 服务中检索一个列表，当用户选择状态时，它会正确填充文本输入并将状态名称存储在 $scope.selected 变量中。但是我想要存储的是对象 {"abbrev":"FL", "state":"Florida"} 因为我想将键/值对保存在数据库中。我怎样才能让它选择一个对象而不是只选择值？

【问题讨论】：

标签： angularjs angular-ui-typeahead

【解决方案1】：

这可以通过将整个对象实际存储到$scope.selected 来完成。它看起来像这样：

<input type="text" ng-model="selected" typeahead="item for item in states" typeahead-editable="false" typeahead-input-formatter="item.state" typeahead-template-url="results.html" />.

需要做的改变是：

返回整个项目：typeahead="item for item in states"
格式化输入以显示状态：typeahead-input-formatter="item.state"
添加模板：typeahead-template-url="results.html"

然后在您的 HTML 中，您可以定义您的自动完成模板来显示状态名称：

<script type="text/ng-template" id="results.html">
    <a>{{match.model.state}}</a>
</script>

【讨论】：