如何使用angularJs自動完成功能而不使用Jquery？

我在表單中創建一個標籤字段，並且我想讓這個字段自動完成，以便它顯示來自我的$ scope變量（即本地源）的建議。如何使用angularJs自動完成功能而不使用Jquery？

<tags-input ng-model="tModel.tags"></tags-input>

但因爲我的項目does not use jqueryI cannot use the jquery autocomplete feature。是有什麼辦法可以讓使用自動完成angularJs。

PS：我已經在stackoverflow中搜索了很多答案，但沒有爲我工作。

來源

2016-11-18 lakshay

您可以使用HTML數據列表標籤 – Weedoze

您是否檢出這個指令？ https://github.com/ghiden/angucomplete-alt – katmanco

嘗試使用Angular UI Bootstrap Typeahead指令。

來源

2016-11-18 08:52:55 tomepejo

我正在這樣做.................... '' – lakshay

但它不工作\ – lakshay

@lakshay您應該使用uib-typeahead類型的。我猜你正在使用該庫的最新版本。 – tomepejo

以下是關於如何實現ui-bootstrap typeahead的基本DEMO。我使用異步調用來從函數cities($viewValue)中提取類型提前結果，而不是僅僅傳遞列表對象。

你的HTML看起來像這樣具有以下腳本

<html> 

    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 

    <body ng-app="plunker"> 
    <div class="container-fluid" ng-controller="TypeaheadCtrl"> 
     <pre>Model: {{result | json}}</pre> 
     <input type="text" ng-model="result" class="form-control" uib-typeahead="address for address in cities($viewValue)" /> 

    </div> 
    </body> 

</html>

你的JS控制器將下面的代碼。

var app = angular.module('plunker', ['ui.bootstrap']); 

app.factory('dataProviderService', ['$http', function($http) { 
    var factory = {}; 
    factory.getCities = function(input) { 

     return $http.get('//maps.googleapis.com/maps/api/geocode/json', { 
      params: { 
       address: input, 
       sensor: false 
      } 
     }); 

    }; 

    return factory; 
}]); 

app.controller('TypeaheadCtrl', ['$scope', '$log','$http', 'dataProviderService', function($scope, $log,$http, dataProviderService) { 
    $scope.cities = function(viewValue) { 

    return dataProviderService.getCities(viewValue).then(function(response) { 
      return response.data.results.map(function(item) { 
       return item.formatted_address; 
      }); 
     }); 

    }; 


}]);

來源

2016-11-18 11:28:46

如何使用angularJs自動完成功能而不使用Jquery？

回答

相關問題