AngularJS返されたajaxオブジェクトを反復する

Question

私はAngularJSを学ぶプログラムを書いています。

$.ajax(
    { 
    url: "/api/request.json", 
    dataType: "json", 
    statusCode: { 
     404: function(){ 
     console.log("Error 404"); 
     } 
    }, 
    success: function(data){ 
     console.log("Successfully copied data to meteo_values"); 
     fn(data); // do something with the data 
    }, 
    error: function(err){ 
     console.log(err); 
    } 
    } 
); 

私はAngularJSを使用して返されたオブジェクトを反復処理したいと思います：このプログラムはそうのように、APIエンドポイントからオブジェクトを返すAjaxの機能を持っています。今、私はそうのように、DIV内のデータを注入するためにはjQueryを使用しています：代わりにそれを行うの

function fn(val){ 
    // populate the webpage with the values 

    var data_table = "<div class='data_table'><p>" + datetext + "</p>"; 
    // iterate through val array 
    for (var value in val){ 

    data_table += "<div class='card'><h2>" + val[value]["city"] + "</h2>"; 
    data_table += "<table><tr><th>Orario</th><th>Temperatura</th><th>Umidità</th></tr>"; 
    data_table += "<tr><td>" + val[value]["t1"]["ora"] + "</td><td>" + val[value]["t1"]["temperatura"] + "</td><td>" + val[value]["t1"]["humidity"] + "</td></tr>"; 
    data_table += "<tr><td>" + val[value]["t2"]["ora"] + "</td><td>" + val[value]["t2"]["temperatura"] + "</td><td>" + val[value]["t2"]["humidity"] + "</td></tr>"; 
    data_table += "<tr><td>" + val[value]["t3"]["ora"] + "</td><td>" + val[value]["t3"]["temperatura"] + "</td><td>" + val[value]["t3"]["humidity"] + "</td></tr>"; 
    data_table += "</table></div>"; 
    } 
    data_table += "</div>" 
    $(".results").append(data_table); 
} 

を（働くが、それはエレガントでいないようです）、私はAngularJSを使用したいと思います。 ng-repeatを使ってみましたが、うまくいきませんでした。 返されたオブジェクトは、3つのオブジェクトの別のセットを含むn個のオブジェクトの配列を含むオブジェクトであると考えてください。

私はすでにあなたが私を助けると答えるの私が役に立つ情報を忘れてしまったかもしれないと私はすでに答えを探したが、私はそれを見つけることができませんでしたng-repeat="(key,value) for name_of_the_variable_in_the_$scope"

を試してみました。

EDIT：

var meteoApp = angular.module('meteoapp', []); 

meteoApp.controller('meteoPopulateCtrl', function ($scope) { 

    $scope.data = []; 

    $.ajax(
    { 
     url: "/api/request.json", 
     dataType: "json", 
     statusCode: { 
     404: function(){ 
      console.log("Error 404"); 
     } 
     }, 
     success: function(data){ 
     $scope.data = data; 
     }, 
     error: function(err){ 
     console.log(err); 
     } 
    } 
); 

HTMLマークアップ

<div ng-app="meteoapp"> 
    <div ng-controller="meteoPopulateCtrl"> 
    <div class="results" ng-repeat="???"> 
     something that is repeated 
    </div> 
    </div> 
</div> 

返されたオブジェクトコードがangularjsである場合、あなたはそれを表示するためのng-repeatを使用する必要があります

[ 
    { 
    "city":"a city", 
    "t1": 
    { 
     "ora":"01", 
    "temperatura":"7.2°", 
    "humidity":"92%"}, 
    "t2": 
    { 
     "ora":"04", 
     "temperatura":"7.1°", 
     "humidity":"93%"}, 
    "t3": 
    { 
     "ora":"07", 
     "temperatura":"7.4°", 
     "humidity":"94%" 
    } 
}] 

Answer 1

（清書します） HTMLページ。ここで

はNGリピートの基本的な例である：

HTML：

<h3>FIFA Mactch Summary:</h3> 
<div ng-app ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="(country,goals) in items">{{country}}: {{goals}}</li> 
    </ul> 
</div> 

Javascriptを：あなたが使用する必要がありますAJAXリクエストについては

var m = { 
    "India": "2", 
    "England": "2", 
    "Brazil": "3", 
    "UK": "1", 
    "USA": "3", 
    "Syria": "2" 
}; 

function MyCtrl($scope) { 
    $scope.items = m; 
} 

Working example

$httpは$http callbacks are all wrapped in $scope.$apply()です。それ以外の場合$ scopeに電話する必要があります。$ apply（）$ scope。$ digest（）となります。

Answer 2

ng-repeatこの作業は、非同期的にロードされるコンテンツが表示される前に範囲を更新することを忘れないようにする必要があります。応答を受信した後に$scope.$apply()を試してください。ng-repeatが応答を受け取る必要があります。

これが役に立ちます。