Показать таблицу в зависимости от ответа json

Question

У меня есть данные json с массивами таких параметров, как Sales, Tax и т. Д. При щелчке определенного параметра с одной страницы целевая страница должна отображать таблицу для этого конкретного параметра.

{ 
    "Sales": [ 
     { 
      "Date": "2015-08-01 23:35:15.652", 
      "Val": 78 
     }, 
     { 
      "Date": "2015-08-01 22:35:15.652", 
      "Val": 82 
     }, 
     { 
      "Date": "2015-08-01 21:35:15.652", 
      "Val": 80 
     }, 
     { 
      "Date": "2015-08-01 21:15:15.652", 
      "Val": 100 
     }, 
     { 
      "Date": "2015-07-27 12:57:15.652", 
      "Val": 94 
     } 
    ], 

"Tax": [ 
     { 
      "Date": "2015-08-01 23:35:15.652", 
      "Min": 78, 
      "Max":150 
     }, 
     { 
      "Date": "2015-08-01 22:35:15.652", 
      "Min": 50, 
      "Max":120 
     }, 
     { 
      "Date": "2015-08-01 21:35:15.652", 
      "Min": 65, 
      "Max":150 
     }, 
     { 
      "Date": "2015-08-01 21:25:15.652", 
      "Min": 70, 
      "Max":190 
     }, 
     { 
      "createdOn": "2015-08-01 21:15:15.652", 
      "Min": 90, 
      "Max":200 
     } 
    ] 
} 

Мой контроллер

angular.module('starter.controllers', []) 
.controller('TableCtrl','$scope', '$http', function($scope, $http) { 
    $http.get('js/data.json').success(function(response){ 
     if(response.data.Sales!=null){ 
      $scope.data =response.data.Sales; 
     } 
     if(response.data.Tax!=null){ 
      $scope.data =response.data.Tax; 
     } 
    }); 
}); 

Как показывают таблицы динамически из данных? Поскольку таблица Sales будет содержать 2 столбца, а таблица налогов будет содержать 3 столбца. Таблица для продаж

<table ng-controller="TableCtrl"> 
      <thead> 
       <th> 
        <td>Date</td> 
        <td>Value</td> 
       </th> 
      </thead>  
      <tbody> 
       <tr ng-repeat="item in data"> 
        <td>{{item.Date}}</td> 
        <td>{{item.Val}}</td> 
       </tr> 
      </tbody> 
     </table> 

Таблица для налога

<table ng-controller="TableCtrl"> 
       <thead> 
        <th> 
         <td>Date</td> 
         <td>Min</td> 
         <td>Max</td> 
        </th> 
       </thead>  
       <tbody> 
        <tr ng-repeat="item in data"> 
         <td>{{item.Date}}</td> 
         <td>{{item.Min}}</td> 
         <td>{{item.Max}}</td> 
        </tr> 
       </tbody> 
      </table> 

Как отображать различные таблицы, основанные на условиях, используя тот же контроллер, TableCtrl?

Answer 1

В контроллере, отдельные данные в $ scope.sales и $ scope.tax:

if(response.data.Sales != null){ 
    $scope.sales = response.data.Sales; 
    $scope.tax = null; 
} 
if(response.data.Tax != null){ 
    $scope.tax = response.data.Tax; 
    $scope.sales = null; 
} 

Тогда при использовании HTML нг-если директива:

<div ng-controller="TableCtrl"> 
    <table ng-if = "sales"> 
     <thead> 
      <th> 
       <td>Date</td> 
       <td>Value</td> 
      </th> 
     </thead>  
     <tbody> 
      <tr ng-repeat="item in sales"> 
       <td>{{item.Date}}</td> 
       <td>{{item.Val}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <table ng-if = "tax"> 
     <thead> 
      <th> 
       <td>Date</td> 
       <td>Min</td> 
       <td>Max</td> 
      </th> 
     </thead>  
     <tbody> 
      <tr ng-repeat="item in tax"> 
       <td>{{item.Date}}</td> 
       <td>{{item.Min}}</td> 
       <td>{{item.Max}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 2

Если у вас есть набор фиксированных типов, таких как Sales, Tax и т. Д., То жестко закодированная версия, например @Majid, является прекрасной. Однако вы можете сделать более динамичную версию, где таблица настраивается на предоставленные json-массивы.

Рассмотрим следующие данные:

var data={ 
    "Sales": [ 
     { 
      "Date": "2015-08-01 23:35:15.652", 
      "Val": 78 
     }, 
     { 
      "Date": "2015-08-01 22:35:15.652", 
      "Val": 82 
     }, 
     { 
      "Date": "2015-08-01 21:35:15.652", 
      "Val": 80 
     }, 
     { 
      "Date": "2015-08-01 21:15:15.652", 
      "Val": 100 
     }, 
     { 
      "Date": "2015-07-27 12:57:15.652", 
      "Val": 94 
     } 
    ], 

"Tax": [ 
     { 
      "Date": "2015-08-01 23:35:15.652", 
      "Min": 78, 
      "Max":150 
     }, 
     { 
      "Date": "2015-08-01 22:35:15.652", 
      "Min": 50, 
      "Max":120 
     }, 
     { 
      "Date": "2015-08-01 21:35:15.652", 
      "Min": 65, 
      "Max":150 
     }, 
     { 
      "Date": "2015-08-01 21:25:15.652", 
      "Min": 70, 
      "Max":190 
     }, 

    ], 
"Inventory": [ 
     { 
      "Type": "Car", 
      "Amount": 100, 

     }, 
     { 
      "Type": "Bike", 
      "Amount": 32, 

     }, 
     { 
      "Type": "Shoes", 
      "Amount": 677, 

     }, 
    ] 
}; 

Контроллер:

function mainCtrl() { 
    this.data=data; 
} 
angular 
    .module('app', []) 
    .controller('mainCtrl', mainCtrl); 

Ниже код HTML будет использовать первый объект в каждом массиве распечатать имена свойств, а затем распечатать каждый объект от массива до таблицы соответственно.

<body ng-controller="mainCtrl as main"> 
    <div ng-repeat="(name, table) in main.data"> 
    <h3>{{name}}</h3> 
    <table> 
     <thead> 
     <tr> 
      <!-- Iterate and print field names --> 
      <th ng-repeat="(key, value) in table[0]">{{key}}</th> 
     </tr> 
     </thead> 
     <tbody> 
     <!-- Print rows --> 
     <tr ng-repeat="row in table"> 
      <td ng-repeat="value in row">{{value}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 

Живой пример здесь: http://jsbin.com/pafanuwoka/edit?html,js,output

Имея это решение вам нужно, чтобы убедиться, что все объекты в каждом массиве, так, как мы печатаем имена полей из первого объекта в каждом массиве. Но вы также можете добавить больше массивов json в поле данных.

Если это распространенное явление в вашем приложении, вероятно, вам следует рассмотреть возможность добавления этого в качестве директивы. Пример здесь: http://jsbin.com/gayirinifo/edit?html,js,output