AngularJS $ http.get（）。然后绑定到列表

Question

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

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

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

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

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

我知道“其他所有东西”都可以用，因为我以前用jQuery填充了列表，我在做什么错呢？

这是服务器的响应：

{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方法返回一个不能迭代的promise，因此您必须通过回调将结果附加到scope变量：

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

现在，由于documents仅在获取结果之后才定义变量，因此您需要documents事先在范围上初始化变量：$scope.documents = []。否则，您的ng-repeat会阻塞。

这样，ng-repeat将首先返回一个空列表，因为documents数组最初是空的，但是一旦收到结果，ng-
repeat将再次运行，因为成功回调中的`documents’已经更改。

另外，您可能需要将ng-repeat表达式更改为：

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

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