Angularjs $http.get().then 并绑定到列表 [英] Angularjs $http.get().then and binding to a list

问题描述

我有一个看起来像这样的列表:

I have a list that looks like this:

<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>

我将此列表绑定到我的控制器中:

I bind this list in my controller, to this:

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

运行时，我没有得到任何结果.当我删除 then 方法时，我得到三个空行，使计数正常，但没有显示任何信息.

When this runs, I dont get any results. when I remove the then method, I get three empty lines, making the count OK, but no information is displayed.

我知道一切"都有效，因为我之前用 jQuery 填充了列表，我做错了什么?

I know "everthing" else works, since I previously populated the list with jQuery, what am I doing wrong?

这是来自服务器的响应:

Here's the response from the server:

{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,…}

推荐答案

$http 方法返回一个无法迭代的promise，因此必须通过回调将结果附加到范围变量:

$http methods return a promise, which can't be iterated, so you have to attach the results to the scope variable through the callbacks:

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

现在，由于这仅在获取结果后才定义 documents 变量，因此您需要事先在作用域上初始化 documents 变量:$scope.documents= [].否则，你的 ng-repeat 会窒息.

Now, since this defines the documents variable only after the results are fetched, you need to initialise the documents variable on scope beforehand: $scope.documents = []. Otherwise, your ng-repeat will choke.

这样，ng-repeat 会首先返回一个空列表，因为 documents 数组一开始是空的，但是一旦收到结果，ng-repeat 就会再次运行，因为 `documents``在成功回调中发生了变化.

This way, ng-repeat will first return an empty list, because documents array is empty at first, but as soon as results are received, ng-repeat will run again because the `documents``have changed in the success callback.

此外，您可能希望将 ng-repeat 表达式更改为:

Also, you might want to alter you ng-repeat expression to:

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

因为如果您的 DisplayDocuments() 函数正在调用服务器，那么由于 $digest 循环，此调用将被多次执行.

because if your DisplayDocuments() function is making a call to the server, than this call will be executed many times over, due to the $digest cycles.

这篇关于Angularjs $http.get().then 并绑定到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！