angularjs - functions - ng angular
Angularjs autocompletar desde $ http (5)
Encontré this enlace útil
$scope.loadSkillTags = function (query) {
var data = {qData: query};
return SkillService.querySkills(data).then(function(response) {
return response.data;
});
};
Estoy intentando escribir una directiva de autocompletado que recupera datos del servidor mediante una solicitud $ http (sin usar ningún complemento externo o scripts) . Actualmente solo funciona con datos estáticos. Ahora, sé que necesito insertar mi solicitud $ http en la source: de la directiva, pero no puedo encontrar ninguna buena documentación sobre el tema.
solicitud 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;
});
Directiva
app.directive(''autoComplete'', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger(''input'');
}, 0);
}
});
};
});
Ver
<input auto-complete ui-items="names" ng-init="manualcat=''no category entered''" ng-model="manualcat">
Entonces, ¿cómo puedo juntar todo esto correctamente de manera angular?
Es necesario escribir un controlador con función ng-change en el alcance. En la devolución de llamada de ng-change se realiza una llamada al servidor y se completan actualizaciones. Aquí hay un talón (sin $http ya que es un plunk):
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);
}
}
}
Hice una directiva de autocompletado y la subí a GitHub. También debe ser capaz de manejar datos de una solicitud HTTP.
Aquí está la demostración: http://justgoscha.github.io/allmighty-autocomplete/ Y aquí la documentación y repositorio: https://github.com/JustGoscha/allmighty-autocomplete
Básicamente, debe devolver una promise cuando desee obtener datos de una solicitud HTTP, que se resuelve cuando se cargan los datos. Por lo tanto, debe inyectar el servicio / directiva / controlador $q en el que emita su solicitud HTTP.
Ejemplo:
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;
}
Espero que esto ayude.
La forma más sencilla de hacerlo en angular o angularjs sin módulos o directivas externas es utilizando la lista y el datalist HTML5. Acaba de obtener un json y use ng-repeat para alimentar las opciones en el datalist. El json lo puedes obtener desde ajax.
en este ejemplo:
- ctrl.query es la consulta que ingresa cuando escribe.
- ctrl.msg es el mensaje que se muestra en el marcador de posición
- ctrl.dataList es el json recuperado
entonces puede agregar filtros y ordenar en la ng-reapet
!! ¡La lista y la identificación del datalist deben tener el mismo nombre!
<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>
ACTUALIZACIÓN: es HTML5 nativo pero tenga cuidado con el tipo de navegador y la versión. échale un vistazo: https://caniuse.com/#search=datalist .
Usa la typehead angular-ui-bootstrap.
Tenía un gran apoyo para $ http y promesas. Además, no incluye ningún JQuery en absoluto, puro AngularJS.
(Siempre prefiero usar las bibliotecas existentes y si faltan algo para abrir un problema o una solicitud de extracción, mucho mejor que crear las suyas de nuevo)