Wie man Angular UI Bootstrap Typeahead mit nearest $ resource füllt

Question

Laut Paweł Kozłowskis Antwort sollte TypeAhead von AngularUI-Bootstrap funktionieren, wenn asynchrone Popup-Einträge mit $ resource in den neuesten Angular Versionen (ich benutze 1.2.X).

Plunk - Paweł's version - Typeahead with $http

Ich denke, ich weiß nicht, wie es richtig zu nutzen (Als Ergebnis erhalte ich einen Fehler in typeaheadHighlight Richtlinie der Code - typeahead behandelt Resource s als Strings und Reifen sofort zurück, um sie hervorzuheben).

Plunk - Typeahead with $resource

Ich denke, der kritische Code ist:

$scope.cities = function(prefix) { 
    var p = dataProviderService.lookup({q: prefix}).$promise; 
    return p.then(function(response){ 
     $log.info('Got it!'); 
     return response.data; 
    }); 
    return p; 
}; 

ich paar Sachen ausprobiert habe - Rückkehr $promise (Version von Plunker), query(), then().
Derzeit verwende ich $http für diese Funktionalität in meiner App und ich bin damit einverstanden. Dennoch wollte nur wissen, wie man das gleiche mit $resource erreichen kann.

Sie vielleicht einen Blick auf diese nehmen wollen: https://github.com/angular/angular.js/commit/05772e15fbecfdc63d4977e2e8839d8b95d6a92d
ist ui.bootstrap.typeahead kompatibel mit diesen Änderungen in Versprechen API $ Ressource?

Answer 1

werden sollten:

$scope.cities = function(prefix) { 
    return dataProviderService.lookup({q: prefix}).$promise.then(
     function(response){ 
     // might want to store them somewhere to process after selection.. 
     // $scope.cities = response.data; 
     return response.data; 
    }); 
}; 

Dieses oberhalb des Winkel commit erwähnt basiert, und es funktionierte für mich auf Angular 1.2.13

Answer 2

Dank der Antwort von @ Andrew-strähnig, ich habe meins mit $ ressource. Ich hatte jedoch kein Datenattribut in meiner Antwort. Ich habe die Abfragemethode für $ resource verwendet, die einen Antworttyp von array erwartet, deshalb gibt es vielleicht kein Datenattribut. Es ist ein Array von Ressourcenobjekten, von denen jedes die Daten enthält. Also mein Code ist etwas einfacher, sieht eher aus wie folgt aus:

$scope.cities = function(prefix) { 
    return dataProviderService.query({q: prefix}).$promise.then(
     function(response){ 
     return response; 
    }); 
}; 

Answer 3

Ich lief in das gleiche Problem und es hatte mir meinen Kopf gegen die Wand schlagen. Das Problem liegt beim Datendienst, da ein Array von Zeichenfolgen zurückgegeben wird, anstatt sie in ein JSON-Objekt einzufügen. $ resource funktioniert nicht mit einem Array von Strings.

Für weitere Informationen, lesen Sie in dieser Antwort: One dimensional array of strings being parsed to 2d by angular resource

Answer 4

typeahead = "i.t_UserName für i in EmployeeInfo | Filter: $ viewValue | LimitTo: 4"
als Attribut des HTML-Eingang geht

und in Ihrem Controller (Mitarbeiter Ressource verwenden)

$ scope.employeeInfo = getEmployeeResourceSvc.getEmplInfo.query (function (Antwort) { $ scope.employeeInfo = Antwort; });

Answer 5

Im UI-Bootstrap 13.0 und Winkel 1.3, können Sie jetzt wie folgt vorgehen:

$scope.cities = function (q) { 
    return $scope.resource.query({ q: prefix }).$promise 
}