Question

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

第一个按钮是关于学生详细信息。我的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，我必须动态构建表，因为无法定义表列名。

有人可以帮忙吗？

Answer 1

我建议你在角度代码中保留两个东西，显示为标题的键和要在表格行中显示的数据。

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

控制器：

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

绑定指令中的click事件：

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.

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

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

2 个答案:

A plnkr for this.