javascript - Angular 自定义指令基本输入过滤器无法正常工作，仅显示第一个匹配实例

Question

我正在为输入字段编写一个自定义指令，当您开始输入时，它将显示一个与您输入的内容相匹配的过滤列表:

angular.module('plunker', [])
.controller('AnimateCtlr', function($scope){
  $scope.data = ['apple', 'orange', 'banana', 'grapes', 'lemon', 'strawberry'];
    $scope.filteredData = [];
})
.directive('basicInputFilter', function($filter){
  var linker = function (scope, element, attrs) {


        element.on('input', function(event, combo, selection){
             var expression = $(this).text();
             expression = scope.filter;
             console.log(expression);
             scope.$apply(function(){

                scope.filteredData = $filter('filter')(scope.data, expression);
             });
        });
    };

    return {
        restrict: 'A',
        link: linker,
        scope: {
            data:'=',
            filteredData:'=',
            filter: '='
        }
    };
});

据我观察，它只会显示第一个匹配实例，而不是所有可能的匹配结果，如果匹配不是第一个字母，则不会显示任何结果。这里有什么问题？

Plunker 是:http://plnkr.co/edit/REDJywQljTmtv2d3ZnD2?p=preview

Answer 1

这与 Angular 无关，而是与浏览器如何实现数据列表元素有关。

比如我上次查了一下，Chrome、Opera、IE都是以“starts with”为过滤条件，而Firefox使用的是“contains”过滤。

这意味着您是否使用 $filter 来设置正确的选项元素并不重要，因为当用户输入时，浏览器将在其之上应用自己的过滤器那个。

我强烈建议暂时放弃数据列表，而是寻找一个实现自动完成元素中所需功能的库。