AngularJs的主角UI预输入匹配 [英] AngularJs UI typeahead match on leading characters
问题描述
在AngularJs UI的预输入功能看似简单，功能强大，但是我一直在试图找出如何让要对主人公进行匹配。例如，如果我输入的输入框A我希望看到所有以启动国家A，而不是所有包含一个州的在名称中'。我一直在寻找了两天就这个问题和它似乎有角，有一个比较自定义过滤器的概念。关于这方面的文档有一个简单的例子，这并不表明确切的语法实现一个比较。
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.
该HTML如下：
<div>Selected: <span>{{selected}}</span></div>
<div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>
在基本的JavaScript看起来像这样
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'];
}
我有一个plunker这里 http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri
所以，简而言之所面临的挑战是让AngularUI预输入到前导字符只匹配。
So the challenge in a nutshell is to get the AngularUI typeahead to match only on the leading characters.
任何帮助或想法将是巨大的AP preciated。
Any help or ideas on this would be hugely appreciated.
推荐答案
在这一天你的问题是不是真的具体到预输入指令的结束，但它有更多的做AngularJS的过滤器是如何工作的。
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.
在presenting一个有效的解决方案，请注意，预输入指令大量使用AngularJS基础设施（$ HTTP，承诺）和前pression语言。因此，要认识到，规定是很重要的|过滤器：选择无非是，一个AngularJS前pression
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.
在看看我们需要找到一种方法的上述前pression滤波阵列的返回匹配项的列表。对预输入指令的唯一特殊的是，有一个 $ viewValue 变量重新presenting通过在输入框中用户输入的值。所以，我们基本上只需要过滤状态阵列返回起始项目 $ viewValue 。
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.
有这样做的方法很多，但由于你提到的比较器的过滤器（请注意，这些只在AngularJS的1.1.x版本的介绍），你就必须定义一个给定的应该决定一个比较器功能项目应在结果还是不行的列表返回。这样的函数可能看起来像如下：
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"
下面是普拉克工作：<一href=\"http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=$p$pview\">http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=$p$pview
这篇关于AngularJs的主角UI预输入匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
