然后Angularjs $http.get() 然后绑定到列表

前端之家收集整理的这篇文章主要介绍了然后Angularjs $http.get() 然后绑定到列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个列表,看起来像这样:
<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方法,我得到三个空行,使计数确定,但没有信息显示

我知道“everthing”的其他工作,因为我以前用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,…}
{Id:fddd1979-c917-4b32-9b83-b315f66984ed,Name:ZA_BL0228_Legitimasjonsskjema BL0228_945111.pdf,…}
$ http方法返回一个promise,它不能被迭代,所以你必须通过回调将结果附加到scope变量:
$scope.documents = [];
$http.get('/Documents/DocumentsList/' + caseId)
  .then(function(result) {
    $scope.documents = result.data;
});

现在,由于这个定义的文档变量只有在结果被获取后,你需要预先在scope上初始化文档变量:$ scope.documents = []。否则,你的ng-repeat会窒息。

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

此外,您可能想要将ng-repeat表达式更改为:

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

因为如果你的DisplayDocuments()函数调用服务器,这个调用将被执行多次,由于$ digest周期。

猜你在找的Angularjs相关文章