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

これを実行すると、結果が得られません。メソッドを削除すると、then3 つの空の行が表示され、カウントは問題なく行われますが、情報は表示されません。

以前にリストに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 メソッドは反復できない promise を返すため、コールバックを介して結果をスコープ変数にアタッチする必要があります。

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

ここで、これは結果がフェッチされた後にのみ変数を定義するため、事前にスコープで変数documentsを初期化する必要があります: . そうしないと、ng-repeat がチョークします。documents$scope.documents = []

このように、最初は配列が空であるため、ng-repeat は最初に空のリストを返しますdocumentsが、成功コールバックで `documents`` が変更されたため、結果が受信されるとすぐに ng-repeat が再度実行されます。

また、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 では、自動アンラップの promise が削除されました。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 に答える