willy willy - 29 days ago 7
AngularJS Question

Is it possible to to make many $scope variables in angular

I want to receive from server some JSON data and print it like this:

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


and my angular script:

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;
});
});


and here is like my json response looks like:

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


Everything works fine for names and only for names for names1 it shows : {{ y.shops }} and for names2: {{ z.shops }}

Answer

Your html markup is incorrect. Your last table is outside the scope of your controller. This is very easy to see when the markup is properly formatted.

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