javascript - 是否有可能在 Angular 中制作许多 $scope 变量

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>

和我的 Angular 脚本:

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 个表的标记在 Angular 应用程序和 Controller 具有范围的 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;
});