Question

我是棱角分明的新手。我正在尝试为我获得的json数据实现typeahead： json数据的格式如下：

$scope.utilstates = [
    { "State": "Florida", "Key": "FL", "Utility": [ "Bartow (City of) Electric", "Clay Electric Co-Op", "Florida Power & Light", "FMG", "Gainesville Regional Utilities", "Gulf Power Company" ] },
    { "State": "Texas", "Key": "TX", "Utility": [ "AEP-Texas (SWEPCO)", "Austin Energy", "Brownsville Public Utilities Board (TX)", "CenterPoint Energy (Reliant - HL&P)"] },
    { "State": "Virginia", "Key": "VA", "Utility": [ "DVP", "NOVEC"] }
];

在html中，我希望用户无论状态如何都进入公用事业公司，并且应该显示匹配的公用事业公司。

在html中，我有这段代码：

<input type="text" ng-model="query.utility" typeahead="st as st.Utility for st in utilstates | filter:({Utility:$viewValue}) | limitTo:8" class="form-control" placeholder="Utilities">

但是我获得了完整的值数组，而不是匹配数组中的选定值。

非常感谢任何帮助。

Plunker链接： http://plnkr.co/edit/no0hATW5mHiIbuON6B9E?p=preview

Answer 1

首先。选择后获得对象数组的原因是{strong>作为关键字之后的as st.Utility，您必须提供在typeahead提示符中和在文本输入中选择后可见的表达式。

之后的第一个表达式（在您的情况下为st）将导致从utilstates而不是所需的Utility接收整个对象。

其次。您不能将嵌套数组中的特定项指向对象，该对象是没有辅助方法的类型选择元素，并且会使代码复杂化。

我的建议是重新考虑这些公用事业的数据结构。也许不是整个状态的数组，而是创建一个单独的实用程序数组。例如：

var utilities = [{
    State: "Virginia",
    Key: "VA",
    Name: "AEP-Texas (SWEPCO)"
}//And so on...]

那么你可以轻松地使用：

utility as utility.Name for utility in utilities

Answer 2

您可以设置一个辅助函数，在新的$ scope数组中将所有数组连接在一起并使用：

<input type="text" ng-model="query.utility" typeahead="util for util in Utilities | limitTo:8" class="form-control" placeholder="Utilities">。

问题是您需要迭代数组以获取值而不是数组。例如：

typeahead="st as st.Utility[1] for st in utilstates"

将返回每个数组中的第二个值。也许在typeahead中有一个比上面的代码更好的方法，但上面的工作。

在角度js中预先输入

2 个答案: