Angularjs $http.get() 및 목록 바인딩

Angularjs $http.get() 및 목록 바인딩

다음과 같은 목록이 있습니다.

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

이것이 실행되면 아무런 결과도 얻을 수 없습니다.를 삭제했을 때thenmethod: 빈 행이 3개 표시되므로 카운트는 정상이지만 정보는 표시되지 않습니다.

그 외의 「모든 것」은 유효합니다.이전에는 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,…}

$sec 메서드는 약속을 반환하며, 이 약속은 반복할 수 없습니다.따라서 콜백을 통해 결과를 스코프 변수에 첨부해야 합니다.

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

자, 이제, 이 정의로 인해documents결과를 가져온 후에만 변수를 초기화할 필요가 있습니다.documents사전에 스코프에 따라 가변:$scope.documents = []그렇지 않으면 ng-repeat이 질식합니다.

이렇게 하면 ng-repeat은 먼저 빈 목록을 반환합니다.documentsarray는 처음에는 비어있지만, 결과를 수신하자마자 ng-module이 다시 실행됩니다.이는 성공 콜백에서 "success"가 변경되었기 때문입니다.

또한 ng-repeat 식을 다음과 같이 변경할 수도 있습니다.

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

왜냐하면 만약 당신이DisplayDocuments()함수는 서버에 콜을 발신하고 있습니다.이 콜은 $120 사이클로 인해 여러 번 실행됩니다.

에서 돌아온 약속$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 를 참조해 주세요.

사실, 당신은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);
});                       

를 사용해 보세요.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>

언급URL : https://stackoverflow.com/questions/16855836/angularjs-http-get-then-and-binding-to-a-list