Question

我想从服务器接收一些JSON数据并按照以下方式打印：

<div ng-app="myApp" ng-controller="pastController">
  <table>
    <tr ng-repeat="x in names">
      <td>{{ x.shops }}</td>
    </tr>
  </table>

  <table>
    <tr ng-repeat="y in names1">
      <td>{{ y.shops }}</td>
    </tr>
  </table>
</div>

<table>
  <tr ng-repeat="z in names2">
    <td>{{ z.shops }}</td>
  </tr>
</table>

和我的角色剧本：

app.controller('pastController', function($scope, $http){
  var req = {
    method: 'post', 
    url: 'showData'
  };

  $http(req).then(function(response){
    console.log(response.data.pastData);
    $scope.names = response.data.pastData;
    $scope.names2 = response.data.presentData;
    $scope.names1 = response.data.futureData;
  });
});

这就像我的json响应看起来像：

     {
       "pastData" : 
         [
           {"id":1, "shopPlace":"warsaw", "shopDate":"2016-08-10", "shops":"milk"},
           {"id":2, "shopPlace":"warsaw", "shopDate":"2016-09-10", "shops":"table"}
         ],
      "futureData" : 
        [
          {"id":3, "shopPlace":"krakow", "shopDate":"2016-12-10", "shops":"bread"}, 
          {"id":4, "shopPlace":"kielce", "shopDate":"2016-11-20", "shops":"water"}
        ],
      "presentData" : 
        [
          {"id":5, "shopPlace":"wroclaw", "shopDate":"2016-11-07", "shops":"sugar"}
        ] 
      }

一切都适用于名称，仅适用于名称1的名称：{{y.shops}}和名称2：{{z.shops}}

Answer 1

我立刻看到的一个问题是第3个表的标记位于角度应用程序和控制器具有范围的div之外，它应该在内部。但是，如果您的第二个表格也没有显示，则必须有另一个问题。这是一个工作的plunker展示一切正常。请注意，数据是硬编码的，而不是从API中提取的：

https://plnkr.co/edit/ZbJeatH1SkkVDxqNkQ0b?p=preview

<div ng-app="myApp" ng-controller="pastController">
   <table>
    <tr ng-repeat="x in names">
      <td>{{ x.shops }}</td>
    </tr>
  </table>
  <hr/>
  <table>
    <tr ng-repeat="y in names1">
      <td>{{ y.shops }}</td>
    </tr>
  </table>
  <hr/>
  <table>
    <tr ng-repeat="z in names2">
      <td>{{ z.shops }}</td>
    </tr>
  </table>
</div>

var app = angular.module('myApp', []);

app.controller('pastController', function($scope, $http) {
    var data =  {
        "pastData" : [{"id":1, "shopPlace":"warsaw", "shopDate":"2016-08-10", "shops":"milk"}, {"id":2, "shopPlace":"warsaw", "shopDate":"2016-09-10", "shops":"table"}],
        "futureData" : [{"id":3, "shopPlace":"krakow", "shopDate":"2016-12-10", "shops":"bread"}, {"id":4, "shopPlace":"kielce", "shopDate":"2016-11-20", "shops":"water"}],
        "presentData" : [{"id":5, "shopPlace":"wroclaw", "shopDate":"2016-11-07", "shops":"sugar"}]
    };

    $scope.names = data.pastData;
    $scope.names2 = data.presentData;
    $scope.names1 = data.futureData;
});

Answer 2

您的HTML标记不正确。您的最后一张表超出了控制器的范围。当标记格式正确时，很容易看到。

<div ng-app="myApp" ng-controller="pastController">
  <table>
    <tr ng-repeat="x in names">
      <td>{{ x.shops }}</td>
    </tr>
  </table>

  <table>
    <tr ng-repeat="y in names1">
      <td>{{ y.shops }}</td>
    </tr>
  </table>
</div>

<table>
  <tr ng-repeat="z in names2">
    <td>{{ z.shops }}</td>
  </tr>
</table>

是否有可能以角度形式制作许多$ scope变量

2 个答案: