Ik probeer een autocomplete-instructie te schrijven die gegevens van de server ophaalt met behulp van een $http-verzoek (zonder externe plug-ins of scripts te gebruiken). Momenteel werkt het alleen met statische gegevens. Nu weet ik dat ik mijn $http-verzoek moet invoegen in de source:van de richtlijn, maar ik kan geen goede documentatie over het onderwerp vinden.
http-verzoek
$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;
});
Richtlijn
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
Bekijken
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
Dus, hoe kan ik dit allemaal correct samenstellen op de Angular-manier?
Antwoord 1, autoriteit 100%
Ik heb een autocomplete-instructie gemaakt en deze geüpload naar GitHub. Het moet ook gegevens van een HTTP-verzoek kunnen verwerken.
Hier is de demo: http://justgoscha.github.io/allmighty-autocomplete/
En hier de documentatie en repository: https://github.com/JustGoscha/allmighty-autocomplete
Dus in principe moet je een promiseretourneren wanneer je gegevens wilt ophalen van een HTTP-verzoek, dat wordt opgelost wanneer de gegevens worden geladen. Daarom moet u de $qservice/directive/controller injecteren waar u uw HTTP-verzoek doet.
Voorbeeld:
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;
}
Ik hoop dat dit helpt.
Antwoord 2, autoriteit 82%
Gebruik typeheadvan angular-ui-bootstrap.
Het had geweldige ondersteuning voor $http en beloften.
Het bevat ook helemaal geen JQuery, pure AngularJS.
(Ik gebruik altijd liever bestaande bibliotheken en als ze iets missen om een probleem of een pull-verzoek te openen, veel beter dan je eigen bibliotheken opnieuw te maken)
Antwoord 3, autoriteit 38%
Je moet een controller schrijven met de functie ng-changein scope. In ng-changecallback doe je een oproep naar de server en werk je voltooiingen bij. Hier is een stub(zonder $httpaangezien dit een plunk):
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="https://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);
}
}
}
Antwoord 4, autoriteit 13%
de gemakkelijkste manier om dat te doen in angular of angularjs zonder externe modules of richtlijnen is door list en datalist HTML5 te gebruiken. Je krijgt gewoon een json en gebruikt ng-repeat voor het invoeren van de opties in de datalijst. De json kun je ophalen van ajax.
in dit voorbeeld:
- ctrl.query is de zoekopdracht die u invoert wanneer u typt.
- ctrl.msg is het bericht dat wordt weergegeven in de tijdelijke aanduiding
- ctrl.dataList is de opgehaalde json
dan kun je filters en orderby toevoegen in de ng-reapet
!! lijst en datalijst-ID moeten dezelfde naam hebben !!
<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, maar wees voorzichtig met het type browser en versie.
check it out: https://caniuse.com/#search=datalist.
Antwoord 5
Ik vond dezelink nuttig
$scope.loadSkillTags = function (query) {
var data = {qData: query};
return SkillService.querySkills(data).then(function(response) {
return response.data;
});
};