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

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

javascript jquery json angularjs

Javascript 如何从angularjs中的JSON数组动态生成列标题和表值？,javascript,jquery,json,angularjs,Javascript,Jquery,Json,Angularjs,在一个页面中，我有两个单选按钮，这两个单选按钮产生不同的结果：第一个按钮是关于学生的详细信息。我的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"}, {"N

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

第一个按钮是关于学生的详细信息。我的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"}]

  [{"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"}]

我的第二个按钮是学术细节。我的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"}]

  [{"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>


名称
等级
部分
出生日期
{{x.Name}
{{x.Class}}
{{x.部分}
{{x.DOB}}

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

有人可以帮忙吗？

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

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

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

您应该首先确保名称列表至少包含一个对象。还请注意，较旧的浏览器可能在Object.keys（）方面存在问题，但如果需要的话，还有一些解决方法

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

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

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

{{header}

您的表呈现应该如下所示：

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


{{x[头]}

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

我的意思是，如果在应用程序中定义了控制器，则可以执行以下操作：

控制员：

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>


{{th}
{{x[th]}