$ http의 Angularjs 자동 완성
$ http 요청 (외부 플러그인 또는 스크립트를 사용하지 않고)을 사용하여 서버에서 데이터를 가져 오는 자동 완성 지시문을 작성하려고합니다 . 현재는 정적 데이터에서만 작동합니다. 이제 source:지시문에 $ http 요청을 삽입해야한다는 것을 알고 있지만 주제에 대한 좋은 문서를 찾을 수 없습니다.
http 요청
$http.post($scope.url, { "command": "list category() names"}).
success(function(data, status) {
$scope.status = status;
$scope.names = data;
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
지령
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
전망
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
그렇다면 어떻게이 모든 것을 Angular 방식으로 올바르게 결합합니까?
자동 완성 지시문을 작성하여 GitHub에 업로드했습니다. 또한 HTTP 요청의 데이터를 처리 할 수 있어야합니다.
여기에 데모가 있습니다 : http://justgoscha.github.io/allmighty-autocomplete/ 그리고 여기에 문서와 저장소 : https://github.com/JustGoscha/allmighty-autocomplete
따라서 기본적으로 promiseHTTP 요청에서 데이터를 얻으려면 데이터가로드 될 때 해결되는를 반환해야합니다 . 따라서 $qHTTP 요청을 발행하는 곳에 서비스 / 지시문 / 컨트롤러 를 삽입해야합니다 .
예:
function getMyHttpData(){
var deferred = $q.defer();
$http.jsonp(request).success(function(data){
// the promise gets resolved with the data from HTTP
deferred.resolve(data);
});
// return the promise
return deferred.promise;
}
이게 도움이 되길 바란다.
angular-ui-bootstrap의 typehead를 사용하십시오 .
$ http와 약속에 대한 큰 지원이있었습니다. 또한 순수한 AngularJS 인 JQuery를 전혀 포함하지 않습니다.
(저는 항상 기존 라이브러리를 사용하는 것을 선호하며 문제를 열거 나 요청을 끌어 오기 위해 무언가가 누락 된 경우 다시 생성하는 것이 훨씬 좋습니다)
ng-change범위에 있는 기능을 가진 컨트롤러를 작성해야합니다 . 에서 ng-change콜백 당신은 서버 및 업데이트 완료를 호출을한다. 다음은 스텁입니다 ( $http플렁크가 아니므로).
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<pre>{{states}}</pre>
<input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
</div>
</body>
</html>
JS
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.states = [];
$scope.onedit = function(){
$scope.states = [];
for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){
var value = "";
for(var j = 0; j < i; j++){
value += j;
}
$scope.states.push(value);
}
}
}
the easiest way to do that in angular or angularjs without external modules or directives is using list and datalist HTML5. You just get a json and use ng-repeat for feeding the options in datalist. The json you can fetch it from ajax.
in this example:
- ctrl.query is the query that you enter when you type.
- ctrl.msg is the message that is showing in the placeholder
- ctrl.dataList is the json fetched
then you can add filters and orderby in the ng-reapet
!! list and datalist id must have the same name !!
<input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}>
<datalist id="autocompleList">
<option ng-repeat="Ids in ctrl.dataList value={{Ids}} >
</datalist>
UPDATE : is native HTML5 but be carreful with the type browser and version. check it out : https://caniuse.com/#search=datalist.
I found this link helpful
$scope.loadSkillTags = function (query) {
var data = {qData: query};
return SkillService.querySkills(data).then(function(response) {
return response.data;
});
};
참고URL : https://stackoverflow.com/questions/18460374/angularjs-autocomplete-from-http
'IT Share you' 카테고리의 다른 글
| Left shifting with a negative shift count (0) | 2020.12.04 |
|---|---|
| ng-repeat 내부의 지시문 사용 및 범위 '@'의 신비한 힘 (0) | 2020.12.04 |
| 자바 8 : 병렬 FOR 루프 (0) | 2020.12.04 |
| Collectors.toSet () 및 HashSet (0) | 2020.12.04 |
| 터미널 프롬프트없이 IPython 세션에서 복사하는 방법 (0) | 2020.12.04 |