javascript - 在 Angular JS 中提前输入

Question

我是 Angular JS 新手。我正在尝试为我得到的 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">

但是我得到了完整的值数组，而不是从匹配的数组中选择的值。

任何帮助将不胜感激。

笨蛋链接: http://plnkr.co/edit/no0hATW5mHiIbuON6B9E?p=preview

Answer 1

首先。选择后获得对象数组的原因是，在 as 关键字之后的 as st.Utility 您必须提供在预输入提示中以及选择后可见的表达式文本输入。

for 之后的第一个表达式(在您的情况下是 st)将导致从 utilstates 接收整个对象，而不是所需的 Utility .

其次。您无法在没有辅助方法的情况下从作为预输入选择元素的对象中的嵌套数组中指向特定项目，这会使您的代码变得更加复杂。

我的建议是重新考虑这些实用程序的数据结构。也许不是制作整个状态的数组，而是创建单个实用程序的数组。例如:

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

然后你可以轻松地使用:

实用程序作为实用程序。实用程序中实用程序的名称