AngularJs UI提前匹配主要字符

Question

AngularJs UI中的预输入功能似乎简单而强大，但是我一直在尝试弄清楚如何对前导字符进行匹配。例如，如果我在输入框中键入“ A”，我想查看名称以“
A”开头的所有状态，而不是名称中包含“
A”的所有状态。对此，Angular似乎具有一个带有“比较器”的自定义过滤器的概念，有关此文档的文档中有一个简单的示例，没有显示实现比较器的确切语法。

html看起来像这样：

<div>Selected: <span>{{selected}}</span></div>
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>

基本的javascript看起来像这样

angular.module('firstChar', ['ui.bootstrap']);

    function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
    }

我在这里有一个矮人http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

因此，总的来说，挑战是使AngularUI提前输入以仅匹配前导字符。

任何帮助或想法，将不胜感激。

Answer 1

归根结底，您的问题并非真正针对该typeahead指令，而是与AngularJS过滤器的工作方式有关。

在提出可行的解决方案之前，请注意，该typeahead指令大量使用了AngularJS基础结构（$
http，promise）和表达式语言。因此，重要的states | filter:selected是要意识到AngularJS表达式仅此而已。

看一下上面的表达式，我们需要找到一种 过滤数组
以返回匹配项列表的方法。关于typeahead指令的唯一特殊之处在于，有一个$viewValue变量表示用户在输入框中输入的值。因此，我们基本上只需要过滤states数组以返回以开头的项目$viewValue。

有很多方法可以做到这一点，但是由于您已经提到了过滤器的比较器（请注意，它们仅在AngularJS的1.1.x版本中引入），因此您必须定义一个比较器函数，该函数应确定是否应给定项是否返回结果列表。这样的功能可能如下所示：

$scope.startsWith = function(state, viewValue) {
  return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
}

定义用法非常简单：

typeahead="name for name in states | filter:$viewValue:startsWith"

这是工作中的小伙伴：http
://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?
p=
preview