Question

在我的index.html中，我有这个：

<input type="text" data-ng-model="title" list="comicstitle">
<datalist id="comicstitle">
    <option  data-ng-repeat="ttl in titles | filter: title" value="{{ttl.name}}">
</datalist>

在我的控制器中，

$scope.titles = [{ name: "Software Engineering", category: 1 }, 
                 { name: "Architect",       category: 2 }, 
                 { name: "Software Engineering1", category: 1 }];

当我输入“软件”，“软件工程”和“软件工程”这个词时，我的数据专家就出现了。但是，当我进入Eng或Engineering时......数据主义者没有返回任何内容。

我应该如何过滤不是由StartsWith而是“包含”？

Answer 1

你遇到的问题不是角度本身，而是html5 datalist。有些文档在这里：http://www.hongkiat.com/blog/html5-datalist/

编辑：看起来浏览器处理数据主义的方式不同。 Chrome显然只会做“StartsWith”，但firefox会使用“Contains”

datalist autocomplete仅支持“StartsWith”而非“Contains”。你必须使用单独的JS来实现你想要的自动完成。这是一个非常好的起点（虽然它确实需要jQuery UI）：

（我没有写这个 - 我只是链接到它并在这里复制代码） http://jsfiddle.net/sebmade/swfjT/ jsfiddle上的代码包括jQuery 1.7.1和jQuery UI 1.8.16：

HTML：

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

JS：

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

过滤器的行为不符合预期

1 个答案: