Angularjs $ http.get() sau đó và ràng buộc vào một danh sách

Question

Tôi có một danh sách giống như thế này:.

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

tôi ràng buộc danh sách này trong bộ điều khiển của tôi, như thế này:

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

Khi điều này chạy, tôi không nhận được bất kỳ kết quả nào. khi tôi xóa phương thức then, tôi nhận được ba dòng trống, làm cho số đếm OK, nhưng không có thông tin nào được hiển thị.

Tôi biết "everthing" khác hoạt động, vì trước đây tôi đã điền danh sách với jQuery, tôi đang làm gì sai?

Đây là phản hồi từ máy chủ:

{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

Phương thức $ http trả lại lời hứa, không thể được lặp, vì vậy bạn phải đính kèm các kết quả vào biến phạm vi thông qua callbacks:

$scope.documents = []; 
$http.get('/Documents/DocumentsList/' + caseId) 
    .then(function(result) { 
    $scope.documents = result.data; 
}); 

Bây giờ, vì đây xác định các biến documents chỉ sau khi kết quả được tìm nạp, bạn cần phải khởi tạo biến documents trên phạm vi trước: $scope.documents = []. Nếu không, ng-lặp lại của bạn sẽ bị nghẹt thở. Bằng cách này, ng-lặp lại đầu tiên sẽ trả về một danh sách trống, bởi vì documents mảng trống vào lúc đầu, nhưng ngay khi nhận được kết quả, ng-lặp lại sẽ chạy lại vì `tài liệu` đã thay đổi trong thành công gọi lại.

Ngoài ra, bạn có thể muốn thay đổi bạn biểu ng-repeat đến:

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

vì nếu chức năng DisplayDocuments() bạn đang thực hiện cuộc gọi đến máy chủ, hơn cuộc gọi này sẽ được thực hiện nhiều lần, do các chu kỳ $ digest.

Answer 2

Hãy thử sử dụng success() gọi lại

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

Nhưng bây giờ kể từ Documents là một mảng và không phải là một lời hứa, hãy tháo ()

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

Thực ra bạn nhận được promise trên $http.get.

Cố gắng sử dụng dòng người sau:

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

đâu documents là mảng của bạn.

$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

Không thể ràng buộc trực tiếp lời hứa từ $http (Tôi không biết chính xác lý do). Tôi đang sử dụng dịch vụ gói mà hoạt động hoàn hảo cho tôi:

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

và liên kết với nó trong bộ điều khiển:

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

CẬP NHẬT !:

Trong góc 1.2 hứa hẹn tự động Unwrap đã xóa bỏ. Xem http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises