Angular定製指令基本輸入過濾器工作不正常，只顯示第一個匹配的實例

我正在爲輸入字段編寫一個自定義指令，當您開始輸入時，它將顯示一個與您輸入的內容匹配的過濾列表：Angular定製指令基本輸入過濾器工作不正常，只顯示第一個匹配的實例

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

來源

2015-12-24 WABBIT0111

你可以看看這個http://jjperezaguinaga.com/2013/09/18/angularjs-html5-autocomplete/ –

試過。現在下拉列表很快就消失了。不能選擇任何東西。 – WABBIT0111

@ WABBIT0111似乎它運作正常。也許我誤解了你的使用意圖。如果添加以字母「A」開頭的更多項目，則會在鍵入「A」時檢索以「A」開頭的所有項目。你是否期待它顯示所有內容，並將「A」排在最前面？ –

這有沒有關係角度，但與瀏覽器如何實現datalist元素。

例如，我上次檢查Chrome，Opera和IE都是基於「開始」過濾，而Firefox使用「contains」。

這意味着如果您使用$filter來設置正確的選項元素並不重要，因爲當用戶鍵入輸入時，瀏覽器將在其上應用自己的過濾器。

我強烈建議現在擺脫datalist，而是尋找一個實現自動完成元素所需功能的庫。

來源

2015-12-25 10:03:27 tasseKATT

Angular定製指令基本輸入過濾器工作不正常，只顯示第一個匹配的實例

回答

相關問題