javascript - Angular JS : creating table with json

Question

我在 angular-JS 中创建了一个应用程序，用于创建包含来自 json 的动态列的表

例如，从服务返回的 JSON 结构位于主 JSON 的其他字段包含另一个 JSON 数组的结构中，该数组是附加列，

所以总共会有四个额外的动态列，即 文件 1、文件 2、文件 3、文件 4 每个对象都有相应文件字段的值，有时存在有时不存在。

$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;
}

我已经使用 javascript 帮助完美地显示了带有动态列的表，但是任何人都可以告诉我一些其他方法来以简单的方式通过 angular js 创建上述动态表，因为在我的代码中我使用了 javascript创建动态列的复杂逻辑如下所示

我的 JS-Fiddle 如下所示

Demo

Answer 1

这将创建一个名为 columns 的对象，其中的属性是动态列的名称(“文件 1”、“文件 2”等)

Controller :

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

查看:

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

Fiddle