Question

我有一个带有Sales，Tax等参数数组的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？

根据条件显示不同的表

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中使用 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>

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

根据json响应显示表

2 个答案: