Javascript Angular JS:使用json创建表
我已经用angular JS创建了一个应用程序,用于从json创建带有动态列的表 例如,从服务返回的JSON结构位于主JSON的others字段包含另一个JSON数组(即附加列)的结构中 因此,总共将有四个附加的动态列,即文件1、文件2、文件3、文件4每个对象都有对应文件字段的值,有时存在,有时不存在Javascript Angular JS:使用json创建表,javascript,jquery,json,angularjs,Javascript,Jquery,Json,Angularjs,我已经用angular JS创建了一个应用程序,用于从json创建带有动态列的表 例如,从服务返回的JSON结构位于主JSON的others字段包含另一个JSON数组(即附加列)的结构中 因此,总共将有四个附加的动态列,即文件1、文件2、文件3、文件4每个对象都有对应文件字段的值,有时存在,有时不存在 $scope.getColumns = function() { //console.log( $scope.datas[0].others[0]); $scope.datas.res
$scope.getColumns = function()
{
//console.log( $scope.datas[0].others[0]);
$scope.datas.resultsOrder = new Array();
for ( var i = 0; i < $scope.datas.length; i++)
{
for ( var j = 0; j < $scope.datas[i].others.length; j++)
{
if (countInstances($scope.datas.resultsOrder, $scope.datas[i].others[j].id) < countInstances(
$scope.datas[i].others, $scope.datas[i].others[j].id)){
$scope.datas.resultsOrder.push($scope.datas[i].others[j].id);
}
}
}
$scope.datas.resultsOrder.sort(function(a, b){
return a.localeCompare(b);
});
return $scope.datas.resultsOrder;
}
$scope.getColumns=function()
{
//console.log($scope.datas[0]。其他[0]);
$scope.datas.resultsOrder=新数组();
对于(变量i=0;i<$scope.datas.length;i++)
{
对于(var j=0;j<$scope.datas[i].others.length;j++)
{
如果(countInstances($scope.datas.resultsOrder,$scope.datas[i].others[j].id)
我已经使用javascript帮助完美地展示了带有动态列的表,但是有人能告诉我通过angular js以简单的方式创建上述动态表的其他方法吗?因为在我的代码中,我使用javascript复杂逻辑创建动态列,如下所示
下面是我的JS小提琴
此wll将创建一个名为columns的对象,其中属性是动态列的名称(“文件1”、“文件2”等) 控制器:
$scope.columns = {};
angular.forEach( $scope.datas, function(data){
angular.forEach( data.others, function(other){
// Set the 'File x' property for each item in the others array
data[other.id] = other.value;
// Add the dyanmic column to the columns object
$scope.columns[other.id] = null;
});
});
视图:
但是这里我们必须在fileInfo变量中硬编码文件1、文件2、文件3、文件4……因为我们不能这样做……因为这些动态列有时会不同……是否有其他方法使其过于动态……重复列如何说如果我有两个文件1,第一个对象的值不同,然后应该有两个文件1列正确…这个解决方案将不会满足重复列。如果你把答案标记为不可接受,我就把它删除。谢谢。可以创建重复的列吗?但不能使用此解决方案,因为它使用其他数组中每个项的属性。如果你不能接受这个答案,我就把它删掉。
<!-- table header -->
<tr>
<th ng-repeat="(column,val) in columns">
<a ng-click="sort_by()"><i>{{column}}</i></a>
</th>
....
</tr>
<!-- data rows -->
<td ng-repeat="(column,v) in columns">{{val[column]}}</td>