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方法时，我得到三个空行，使计数正常，但没有显示任何信息。

我知道“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

$ 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周期，此调用将多次执行。

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

<强>更新：<！/强>

在Angular 1.2中，自动解包承诺被删除。见http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises

Answer 3

实际上，您在promise上获得了$http.get。

尝试使用后续流程：

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

documents是你的数组。

$scope.documents = [];

$http.get('/Documents/DocumentsList/' + caseId).then(function(result) {
    result.data.forEach(function(val, i) { 
        $scope.documents.push(/* put data here*/);
    });
}, function(error) {
    alert(error.message);
});

Answer 4

尝试使用success()回拨

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

但是现在因为Documents是一个数组而不是一个承诺，所以删除()

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

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

4 个答案: