javascript - 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 typeahead 仅匹配前导字符。

对此的任何帮助或想法将不胜感激。

Answer 1

归根结底，您的问题并不是真正特定于 typeahead 指令，而是与 AngularJS 过滤器的工作方式有更多关系。

在提出可行的解决方案之前，请注意 typeahead 指令大量使用 AngularJS 基础设施($http、promise)和表达式语言。因此，重要的是要认识到 状态 | 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