promises - Angularjs $ http.get()。然後綁定到列表



angularjs promise (3)

$ 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週期,此調用將被執行多次。

https://src-bin.com

我有一個如下所示的列表:

<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, Order:1,…}
{Id:fddd1979-c917-4b32-9b83-b315f66984ed, Name:ZA_BL0228_Legitimasjonsskjema BL0228_945111.pdf,…}

Answer #1

嘗試使用success()回調

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

但是現在因為Documents是一個數組而不是一個promise,所以刪除()

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

Answer #2

$http返回的承諾不能直接綁定(我不知道為什麼)。 我正在使用適合我的包裝服務:

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

並在控制器中綁定它:

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

UPDATE !:

在Angular 1.2中,自動解包承諾被刪除。 見http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises





promise