如何从 angularjs 中的 JSON 数组动态生成列标题和表值？答案

【问题标题】：How to Generate column heading and table values dynamically from JSON array in angularjs?如何从 angularjs 中的 JSON 数组动态生成列标题和表值？
【发布时间】：2015-08-10 14:09:19
【问题描述】：

在一个页面中，我有两个单选按钮，这两个单选按钮产生不同的结果：

第一个按钮是关于学生详细信息的。我的 json 数组如下所示：

 [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"B", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"C", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"D", "Class":"x", "Section":"abcd", "DOB": "XYZ"}]

我的第二个按钮是学术细节。我的 json 数组如下所示：

  [{"Name":"A", "Language":"x", "English":"90", "Maths": "90"},
   {"Name":"B", "Language":"x", "English":"80", "Maths": "80"},
   {"Name":"C", "Language":"x", "English":"70", "Maths": "70"},
   {"Name":"D", "Language":"x", "English":"60", "Maths": "60"}]

以前我遵循类似这样的代码

<body>
  <div ng-app="" ng-init='names =  [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
      {"Name ":"B ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
      {"Name ":"C ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
      {"Name ":"D ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "}];'>

    <table border="2px">
      <tr>
        <th>
          Name
        </th>
        <th>
          Class
        </th>
        <th>
          Section
        </th>
        <th>
          DOB
        </th>
      </tr>

      <tr ng-repeat="x in names">
        <td>
          {{ x.Name}}
        </td>
        <td>
          {{x.Class}}
        </td>
        <td>
          {{x. Section}}
        </td>
        <td>
          {{x. DOB}}
        </td>
      </tr>
    </table>
  </div>
</body>

但是现在表格列和表格值不同了。使用输出 json，我必须动态构建表，因为无法定义表列名。

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery json angularjs

【解决方案1】：

我建议您在 Angular 代码中维护两件事，显示为标题的键和显示在表格行中的数据。

我的意思是，如果您在应用程序中定义了控制器，那么您可以这样做：

控制器：

app.controller(['$scope', function($scope){
  $scope.obj = {};
  $scope.obj.key = []; // store the keys here
  $scope.obj.data = []; // store the data here

  $scope.changeData = function(key, data) {
    $scope.obj.data = data;
    $scope.obj.key = key;
    $scope.$apply(function() { // use this to apply changes.
      return $scope.obj;
    });
  };
}]);

在指令中绑定点击事件：

app.directive('YourDirective', function(){
    return {
       restrict: 'E',
       templateUrl: 'template.html', // where you have buttons and table
       link: function (scope, element) {
           angular.element(element).find('button').on('click', function(e){
              // Your ajax call here when you get the response then you can
              // update the $scope.data
              var key = Object.keys(data[0]);
              var data = data;
              scope.changeData(key, data);
           });
       }
   };
});

然后在你的模板中：

<table border="2px">
  <tr>
    <th ng-repeat="th in keys">{{th}}</th>
  </tr>
  <tr ng-repeat="x in data">
    <td ng-repeat="th in keys">
        {{ x[th]}}
    </td>
  </tr>
</table>

A plnkr for this.

【讨论】：

【解决方案2】：

在您的控制器中，您可以使用以下命令创建列标题列表：

$scope.colHeaders = Object.keys($scope.names[0])

您应该首先确保名称列表包含至少一个对象。另请注意，较旧的浏览器可能会遇到 Object.keys() 的问题，但如果需要，也有解决方法。

现在在您的视图中，您可以使用以下方法呈现表头：

<th ng-repeat="header in colHeaders">{{ header }}</th>

你的表格渲染应该是这样的：

<tr ng-repeat="x in names">
  <td ng-repeat="header in colHeaders">
    {{ x[header] }}
  </td>
</tr>

【讨论】：