検索フィルタを使用した角オートコンプリート

Question

検索フィルタと組み合わせた角度でオートコンプリート機能を使用するにはどうすればよいですか？

これは私のコードで検索フィルタを使用しています。私の問題はオートコンプリート機能を追加することです。

JSコード

angular.module('sortApp', []) 

    .controller('mainController', function($scope) { 
    $scope.sortType  = 'country'; // set the default sort type 
    $scope.sortReverse = false; // set the default sort order 
    $scope.searchCountry = '';  // set the default search/filter term 


    $scope.countries = [ 
    { country: 'Austria', smallmediumbusiness: '+43-720-880296', enterprise: '0800006482', countryClass:'at'}, 
    { country: 'Belgium', smallmediumbusiness: '+32-78480136', enterprise: '080049411', countryClass:'be'}, 
    { country: 'Bulgaria', smallmediumbusiness: '+359-24917167', enterprise: '00800-115-1013', countryClass:'bg'}, 
    { country: 'Croatia', smallmediumbusiness: '', enterprise: '0800-7534', countryClass:'hr'}, 
    { country: 'Czech Republic', smallmediumbusiness: '+420-228880035', enterprise: '800-408-884', countryClass:'cz'}, 
    { country: 'Denmark', smallmediumbusiness: '+45-89880568', enterprise: '80888039', countryClass:'dk'}, 
    { country: 'Estonia', smallmediumbusiness: '+372-8801898', enterprise: '800-0100-199', countryClass:'ee'}, 
    { country: 'Finland', smallmediumbusiness: '+358-942597807', enterprise: '0800114334', countryClass:'fi'}, 
    { country: 'France', smallmediumbusiness: '+33176686572', enterprise: '0805636251', countryClass:'fr'}, 
    { country: 'Germany', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'de'}, 
    { country: 'Hungary', smallmediumbusiness: '+36-18088424', enterprise: '0680015552', countryClass:'hu'}, 
    { country: 'Iceland', smallmediumbusiness: '', enterprise: '8009078', countryClass:'is'}, 
    { country: 'Ireland', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'ie'} 
    ]; 

}); 

HTML

<input class="form-control" id="tags" type="search" ng-model="searchCountry" placeholder="Type your country to search" required="" style="margin-bottom:10px; margin-left: -16px;"/> 


<tr ng-repeat="view in countries | orderBy:sortType:sortReverse | filter:searchCountry"> 
         <td class="{{view.countryClass}}">{{ view.country }}</td> 
         <td>{{ view.smallmediumbusiness }}</td> 
         <td>{{ view.enterprise }}</td> 
        </tr> 

は、事前にありがとうございます。

Answer 1

angular-ui#typeaheadをお勧めします。

あなたはちょうどこの輸入する必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script> 

そしてにごモジュールににそれを注入：

angular 
    .module('sortApp', ['ngAnimate', 'ui.bootstrap']) 

が作業、それを参照してください：

(function() { 
 
    angular 
 
    .module('sortApp', ['ngAnimate', 'ui.bootstrap']) 
 
    .controller('mainController', mainController); 
 
    
 
    mainController.$inject = ['$scope']; 
 
    
 
    function mainController($scope) { 
 
     $scope.countries = [ 
 
     { 
 
      "country":"Austria", 
 
      "smallmediumbusiness":"+43-720-880296", 
 
      "enterprise":"0800006482", 
 
      "countryClass":"at" 
 
     }, 
 
     { 
 
      "country":"Belgium", 
 
      "smallmediumbusiness":"+32-78480136", 
 
      "enterprise":"080049411", 
 
      "countryClass":"be" 
 
     }, 
 
     { 
 
      "country":"Bulgaria", 
 
      "smallmediumbusiness":"+359-24917167", 
 
      "enterprise":"00800-115-1013", 
 
      "countryClass":"bg" 
 
     }, 
 
     { 
 
      "country":"Croatia", 
 
      "smallmediumbusiness":"", 
 
      "enterprise":"0800-7534", 
 
      "countryClass":"hr" 
 
     }, 
 
     { 
 
      "country":"Czech Republic", 
 
      "smallmediumbusiness":"+420-228880035", 
 
      "enterprise":"800-408-884", 
 
      "countryClass":"cz" 
 
     }, 
 
     { 
 
      "country":"Denmark", 
 
      "smallmediumbusiness":"+45-89880568", 
 
      "enterprise":"80888039", 
 
      "countryClass":"dk" 
 
     }, 
 
     { 
 
      "country":"Estonia", 
 
      "smallmediumbusiness":"+372-8801898", 
 
      "enterprise":"800-0100-199", 
 
      "countryClass":"ee" 
 
     }, 
 
     { 
 
      "country":"Finland", 
 
      "smallmediumbusiness":"+358-942597807", 
 
      "enterprise":"0800114334", 
 
      "countryClass":"fi" 
 
     }, 
 
     { 
 
      "country":"France", 
 
      "smallmediumbusiness":"+33176686572", 
 
      "enterprise":"0805636251", 
 
      "countryClass":"fr" 
 
     }, 
 
     { 
 
      "country":"Germany", 
 
      "smallmediumbusiness":"+33176686572", 
 
      "enterprise":"08005893734", 
 
      "countryClass":"de" 
 
     }, 
 
     { 
 
      "country":"Hungary", 
 
      "smallmediumbusiness":"+36-18088424", 
 
      "enterprise":"0680015552", 
 
      "countryClass":"hu" 
 
     }, 
 
     { 
 
      "country":"Iceland", 
 
      "smallmediumbusiness":"", 
 
      "enterprise":"8009078", 
 
      "countryClass":"is" 
 
     }, 
 
     { 
 
      "country":"Ireland", 
 
      "smallmediumbusiness":"+33176686572", 
 
      "enterprise":"08005893734", 
 
      "countryClass":"ie" 
 
     } 
 
     ]; 
 
    } 
 
})();

<!doctype html> 
 
<html ng-app="sortApp"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 

 
<body ng-controller="mainController"> 
 
    <div class="col-md-12"> 
 
    <input type="text" ng-model="selected" uib-typeahead="c.country for c in countries | filter:$viewValue | limitTo:8" class="form-control"> 
 
    <pre ng-bind-template="Model: {{selected | json}}"></pre> 
 
    </div> 
 
</body> 
 

 
</html>