Angularjs $ http.get (). Then et liaison à une liste

Question

J'ai une liste qui ressemble à ceci:

<li ng-repeat="document in DisplayDocuments()" ng-class="IsFiltered(document.Filtered)">
    <span><input type="checkbox" name="docChecked" id="doc_{{document.Id}}" ng-model="document.Filtered" /></span>
    <span>{{document.Name}}</span>
</li>

- Je lier cette liste dans mon contrôleur, pour cela:

$scope.Documents = $http.get('/Documents/DocumentsList/' + caseId).then(function(result) {
    return result.data;
});

Lorsque cela fonctionne, je n'obtiens aucun résultat. lorsque je retire l' then méthode, j'obtiens trois lignes vides, rendant le comte OK, mais aucune information n'est affichée.

Je sais que "tout" le reste fonctionne, puisque j'ai déjà rempli la liste avec jQuery, ce que je fais mal?

Voici la réponse du serveur:

{Id:3f597acf-a026-45c5-8508-bc2383bc8c12, Name:ZZ_BL0164_Skisse BL0164_945111.pdf, Order:1,…}
{Id:46f51f1f-02eb-449a-9824-8633e8ae7f31, Name:ZB_BL0201_Firmaattest BL0201_945111.pdf, Order:1,…}
{Id:fddd1979-c917-4b32-9b83-b315f66984ed, Name:ZA_BL0228_Legitimasjonsskjema BL0228_945111.pdf,…}

Answer 1

$http méthodes de retour d'une promesse, qui ne peut être itéré, de sorte que vous devez joindre les résultats de la portée de la variable à travers les rappels:

$scope.documents = [];
$http.get('/Documents/DocumentsList/' + caseId)
  .then(function(result) {
    $scope.documents = result.data;
});

Maintenant, puisque ce qui définit l' documents variable seulement après que les résultats sont récupérés, vous devez initialiser l' documents variable sur la portée à l'avance: $scope.documents = []. Sinon, votre ng-repeat va s'étouffer.

De cette façon, ng-repeat sera d'abord renvoyer une liste vide, car documents tableau est vide au premier abord, mais dès qu'il a reçu les résultats, ng-repeat fonctionnera à nouveau parce que les " documents`ont changé dans la réussite de rappel.

Aussi, vous pouvez modifier vous ng-repeat expression:

<li ng-repeat="document in documents" ng-class="IsFiltered(document.Filtered)">

parce que si votre DisplayDocuments() fonction est de faire un appel au serveur, que cet appel sera exécutée plusieurs fois, en raison de $digest cycles.

Answer 2

Promesse retourné à partir de $http ne peut pas être appliqué directement (je n'ai pas exactement savoir pourquoi). Je suis à l'aide d'emballage de service qui fonctionne parfaitement pour moi:

.factory('DocumentsList', function($http, $q){
    var d = $q.defer();
    $http.get('/DocumentsList').success(function(data){
        d.resolve(data);
    });
    return d.promise;
});

et de se lier à elle dans le contrôleur:

function Ctrl($scope, DocumentsList) {
    $scope.Documents = DocumentsList;
    ...
}

Mise à JOUR!:

Dans Angulaire 1.2 auto-unwrap promesses a été supprimé. Voir http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises

Answer 3

En fait, vous obtenez promise sur $http.get .

Essayez d'utiliser le flux suivi:

 <li ng-repeat="document in documents" ng-class="IsFiltered(document.Filtered)">
    <span><input type="checkbox" name="docChecked" id="doc_{{document.Id}}" ng-model="document.Filtered" /></span>
    <span>{{document.Name}}</span>
</li>
 

Où documents est votre tableau.

 $scope.documents = [];

$http.get('/Documents/DocumentsList/' + caseId).then(function(result) {
    result.data.forEach(function(val, i) { 
        $scope.documents.push(/* put data here*/);
    });
}, function(error) {
    alert(error.message);
});                       
 

Answer 4

Essayez d'utiliser les success() rappels

 $http.get('/Documents/DocumentsList/' + caseId).success(function (result) {
    $scope.Documents = result;
});
 

Mais maintenant, puisque Documents est un tableau et non une promesse, supprimez le ()

 <li ng-repeat="document in Documents" ng-class="IsFiltered(document.Filtered)"> <span>
           <input type="checkbox" name="docChecked" id="doc_{{document.Id}}" ng-model="document.Filtered" />
        </span>
 <span>{{document.Name}}</span>

</li>