50

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

<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,…}
4

4 回答 4

54

$http 方法返回一个无法迭代的承诺，因此您必须通过回调将结果附加到范围变量：

$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 循环，此调用将被执行多次。

于 2013-05-31T11:26:49.987 回答
26

从返回的承诺$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

于 2013-08-13T20:26:34.917 回答
6

其实你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);
});
于 2013-05-31T11:30:06.157 回答
1

尝试使用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>
于 2013-05-31T11:17:43.593 回答