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,promises)和表达式语言.所以重要的states | filter:selected是要意识到它只不过是一个AngularJS表达式.

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

有很多方法可以做到这一点但是因为你已经提到过滤器的比较器(请注意那些仅在1.1.x版本的AngularJS中引入)你必须定义一个比较器函数来决定给定的项目是否应该是是否返回结果列表.这样的功能可能如下所示:

$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