是否有可能使许多$范围变量角度

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"} 
     ] 
     } 

一切工作正常的名称，只为name1名称它显示：{{y.shops}}和名称2：{{z.shops}}

Answer 1

您的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> 

Answer 2

的一个问题，我马上看到的是，你的第三个表的标记是div其中角应用程序和控制器具有范围之外，它应该是里面。但是，如果您的第二个表格也未显示，那么肯定还有其他问题。这里展示了一切正在发挥作用的劳动者。需要注意的是数据被硬编码的而不是从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; 
});