根据 json 响应显示表格答案

【问题标题】：Show table depending on json response根据 json 响应显示表格
【发布时间】：2016-02-15 20:52:52
【问题描述】：

我有一个 json 数据，其中包含销售、税收等参数数组。从一个页面单击特定参数时，登录页面应显示该特定参数的表格。

{
    "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 列，而 Tax 表将包含 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>

同一个Controller TableCtrl如何根据条件显示不同的表格？

【问题讨论】：

标签： javascript angularjs json dynamic-data-display

【解决方案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 中使用 ng-if 指令：

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

【讨论】：

我认为您的 ng-if 语句在逻辑上是不正确的。

【解决方案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

【讨论】：