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将数据注入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 MARKUP

<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 callbacks are all wrapped in $scope.$apply()。否则你需要打电话给 $ scope。$ apply（），它会为你调用 $ scope。$ digest（）。

Answer 2

ng-repeat将完成这项工作 - 您需要记住在显示异步加载的内容之前刷新范围。收到回复后请尝试$scope.$apply()，ng-repeat应该接听回复。

希望这有帮助。

AngularJS迭代ajax返回的对象

2 个答案: