Angularjs $ http.get（），然后和绑定到列表 [英] Angularjs $http.get().then and binding to a list

问题描述

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

 ＆LT;李NG重复=在DisplayDocuments文件（）NG-CLASS =IsFiltered（document.Filtered）＆GT;
    ＆LT;跨度＆GT;＆LT;输入类型=复选框NAME =docCheckedID =DOC _ {{document.Id}}NG模型=document.Filtered/＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT; {{document.Name}}＆LT; / SPAN＆GT;
＆LT; /李＆GT;
 

我结合这个名单在我的控制器，这样：

  $ scope.Documents = $ http.get（'/文件/ DocumentsList /+ caseId）。然后（功能（结果）{
    返回result.data;
}）;
 

在此运行，我没有得到任何结果。当我删除然后的方法，我得到三个空行，使得数行，但不显示任何信息。

我知道全部的寄托别人的作品，因为我previously填充jQuery的名单，我究竟做错了什么？

下面是来自服务器的响应：

  {ID：3f597acf-a026-45c5-8508-bc2383bc8c12，名称：ZZ_BL0164_Skisse BL0164_945111.pdf，顺序：1，...}
{ID：46f51f1f-02eb-449A-9824-8633e8ae7f31，名称：ZB_BL0201_Firmaattest BL0201_945111.pdf，顺序：1，...}
{ID：fddd1979-c917-4b32-9b83-b315f66984ed，名称：ZA_BL0228_Legitimasjonsskjema BL0228_945111.pdf，...}
 

解决方案

$ HTTP方法返回一个承诺，不能被重复，所以你必须通过回调来连接结果范围变量：

  $ scope.documents = [];
$ http.get（'/文件/ DocumentsList /+ caseId）
  。然后（功能（结果）{
    $ scope.documents = result.data;
}）;
 

现在，因为这定义了文件变量后，方可结果是牵强，你需要初始化文件对范围的变量事先： $ scope.documents = [] 。否则，你的NG重复就会窒息。

这样，NG-重复将首先返回一个空列表，因为文件数组是在第一个空，但只要结果被接受，NG重复运行又因为`documents``have在成功回调改变了。

另外，你可能想改变你的NG-重复前pression为：

 ＆LT;李NG重复= NG-CLASS =IsFiltered（document.Filtered）＆gt的帮助文档中的文件;
 

因为如果你的 DisplayDocuments（）功能正在向服务器发出呼叫，比这个呼叫将在执行多次，由于$消化周期。

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;
});

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.

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 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;
});

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.

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.

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

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

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（），然后和绑定到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！