javascript 如何从 angularjs 中的 JSON 数组动态生成列标题和表值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30500265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Generate column heading and table values dynamically from JSON array in angularjs?
提问by Priya
In a page I have two radio buttons and the two radio buttons produce different results:
在一个页面中，我有两个单选按钮，这两个单选按钮产生不同的结果：
First button is about Student Details. My json array looks like this :
第一个按钮是关于学生详细信息。我的 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"}]
My second button is academic details. My json array looks like this :
我的第二个按钮是学术细节。我的 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"}]
Previously I followed code similar like this
以前我遵循类似这样的代码
<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>
But now the table columns and table values differs. With the output json, I have to build table dynamically since table column name cannot be defined.
但现在表列和表值不同。使用输出 json，我必须动态构建表，因为无法定义表列名。
Could anyone help with this?
有人可以帮忙吗？
回答by Jai
Well i suggest you to maintain two things in angular code, keys to show as header and data to show in the table rows.
好吧，我建议您在 angular 代码中维护两件事，显示为标题的键和显示在表格行中的数据。
What i meant is if you have a controller defined in your application then you can do this:
我的意思是，如果您在应用程序中定义了一个控制器，那么您可以这样做：
The controller:
控制器：
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;
});
};
}]);
bind the click event in the directives:
在指令中绑定点击事件：
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);
});
}
};
});
Then in your template:
然后在您的模板中：
<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.
一个plnkr。
回答by OrenD
In your controller, you can create a list of the column headers by using:
在您的控制器中，您可以使用以下方法创建列标题列表：
$scope.colHeaders = Object.keys($scope.names[0])
You should first make sure the names list contains at least one object. Also note that older browsers may have an issue with Object.keys() but there are workarounds, if needed.
您应该首先确保名称列表至少包含一个对象。另请注意，较旧的浏览器可能存在 Object.keys() 问题，但如果需要，有解决方法。
Now in your view, you can render the table headers by using:
现在，在您的视图中，您可以使用以下方法呈现表格标题：
<th ng-repeat="header in colHeaders">{{ header }}</th>
And your table rendering should look something like this:
你的表格渲染应该是这样的：
<tr ng-repeat="x in names">
<td ng-repeat="header in colHeaders">
{{ x[header] }}
</td>
</tr>
