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: '='
        }
    };
});

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

笨蛋是：http://plnkr.co/edit/REDJywQljTmtv2d3ZnD2?p=preview

Answer 1

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

比如我上次查看，Chrome，Opera和IE都是基于"starts with"过滤，而Firefox使用"contains".

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

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

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

Angular custom directive basic input filter not working properly, only show 1st instance of match

javascript

jquery

angularjs

angularjs-directive

html-datalist