AngularJs UI 预先输入匹配前导字符 [英] AngularJs UI typeahead match on leading characters

问题描述

AngularJs UI 中的预输入功能看起来简单而强大，但我一直在尝试弄清楚如何对前导字符进行匹配.例如，如果我在输入框中输入A"，我希望看到所有以A"开头的州，而不是所有名称中包含A"的州.我已经找了几天了在这一点上，似乎 Angular 有一个自定义过滤器的概念，它有一个比较器".关于这个的文档有一个简单的例子，没有显示实现比较器的确切语法.

html 如下所示:

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

基本的javascript看起来像这样

angular.module('firstChar', ['ui.bootstrap']);函数 TypeaheadCtrl($scope) {$scope.selected = 未定义；$scope.states = ['阿拉巴马州', '阿拉斯加州', '亚利桑那州', '阿肯色州', '加利福尼亚州', '科罗拉多州', '康涅狄格州', '特拉华州', '佛罗里达州', '乔治亚州', '夏威夷州',爱达荷州"、伊利诺伊州"、印第安纳州"、爱荷华州"、堪萨斯州"、肯塔基州"、路易斯安那州"、缅因州"、马里兰州"、马萨诸塞州"、密歇根州"、明尼苏达州"、密西西比州"', '密苏里州', '蒙大拿州', '内布拉斯加州', '内华达州', '新罕布什尔州', '新泽西州', '新墨西哥州', '纽约州', '北达科他州', '北卡罗来纳州', '俄亥俄州'', '俄克拉荷马州', '俄勒冈州', '宾夕法尼亚州', '罗德岛州', '南卡罗来纳州', '南达科他州', '田纳西州', '德克萨斯州', '犹他州', '佛蒙特州', '弗吉尼亚州', '华盛顿"、西弗吉尼亚"、威斯康星"、怀俄明"]；}

我这里有一个 plunker http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

所以简而言之，挑战是让 AngularUI 提前输入以匹配前导字符.

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

解决方案

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

在提出可行的解决方案之前，请注意 typeahead 指令大量使用 AngularJS 基础结构($http、promises)和表达式语言.所以重要的是要意识到states |filter:selected 只不过是一个 AngularJS 表达式.

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

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

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

定义用法很简单:

typeahead="状态名称的名称 | filter:$viewValue:startsWith"

这是工作 plunk:http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

The typeahead functionality in AngularJs UI seems simple and powerful however I have been trying to figure out how to get the matching to be done on the leading characters. For example if I type 'A' in the input box I would like to see all the states that start with 'A" and not all the states that contain an 'A' in the name. I have been looking for a couple of days on this and it seems that Angular has the concept of a custom filter that has a 'comparator'. The docs on this have a simple example that does not show the exact syntax for implementing a comparator.

The html looks like this:

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

The basic javascript looks like this

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'];
    }

I have a plunker here http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

So the challenge in a nutshell is to get the AngularUI typeahead to match only on the leading characters.

Any help or ideas on this would be hugely appreciated.

解决方案

At the end of the day your question is not really specific to the typeahead directive but it has more to do with how AngularJS filters work.

Before presenting a working solution please note that the typeahead directive makes heavy use of AngularJS infrastructure ($http, promises) and expression language. So it is important to realize that the states | filter:selected is nothing more that an AngularJS expression.

Having a look at the above expression we need to find a way of filtering an array to return a list of matching items. The only special thing about the typeahead directive is that there is a $viewValue variable representing a value entered by a user in the input box. So we basically just need to filter the states array to return items starting with the $viewValue.

There are many ways of doing this but since you've mentioned the comparator for filters (please note that those were only introduced in 1.1.x version of AngularJS) you would have to define a comparator function that should decide if a given item should be returned in the list of results or not. Such a function could look like follows:

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

Having it defined the usage is very simple:

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

Here is the working plunk: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

这篇关于AngularJs UI 预先输入匹配前导字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！