javascript - AngularJS 迭代ajax返回的对象

Question

我正在编写一个程序来学习 AngularJS。该程序有一个 ajax 函数，它从 API 端点返回一个对象，如下所示:

$.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 返回的对象。现在我正在使用 jQuery 将数据注入(inject) div 中，如下所示:

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 但没有成功。考虑返回的对象是一个包含 n 个对象的数组的对象，该数组还包含另一组三个对象。

我已经尝试过 ng-repeat="(key,value) for name_of_the_variable_in_the_$scope"

我可能忘记了您可以帮助我回答的有用信息，我已经搜索过答案，但没有找到。

编辑:

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>

返回的对象(待美化)

[
  {
    "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

如果你的代码是在 angularjs 中，你应该使用 ng-repeat用于在 html 页面上显示它。

这是 ng-repeat 的基本示例:

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:

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

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

Working example

对于ajax请求，您应该使用$http，因为$http回调全部包装在$scope.$apply()中。否则，您需要调用 $scope.$apply()，它将为您调用 $scope.$digest()。