使用Angularjs在表格中重复

时间:2016-05-28 05:18:16

标签: javascript html angularjs

我使用的数组是[{"cell":["jobcode","resume_number","score"]},{"cell":["jc100","rc1",80]},{"cell":["jc100","rc123",70]}]

我提出了javascript代码

var cell=response;
for (var i in cell) {
    for(var j in cell[i])
    {
        console.log(cell[i][j]);
        profiles.push(cell[i][j]);
        $scope.profiles=profiles;
        for(k in cell[i][j])
        {
            resumes.push(cell[i][j]);
            console.log("resume length"+resumes.length);
            $scope.columns=resumes;
            console.log(JSON.stringify($scope.columns));
        }
    }
}

html是

<tr ng-repeat="profile in profiles track by $index" >
  <td ng-repeat="col in columns track by $index">
    <label >{{col.cell}}</label>
  </td>
</tr>

结束了enter image description here

我不知道要继续前进。我需要将这些数据组织成一个表格。请帮忙。

2 个答案:

答案 0 :(得分:0)

您的数据包含一个包含另一个数组的对象数组。因此,您需要从外部数组中提取每个对象,然后转到内部数组。

如果您只需要将这些数据整理到表格中,那么您只需使用以下代码:

您的控制器代码:

$scope.cell = response;

您的HTML:

<tr ng-repeat="profile in cell track by $index" >
    <td ng-repeat="col in profile.cell track by $index">
        <label >{{col}}</label>
    </td>
</tr>

如果您需要存储每个数组对象,则可以使用forEach循环:

您的控制器代码:

var cell=[{"cell":["jobcode","resume_number","score"]}, {"cell":["jc100","rc1",80]}, {"cell":["jc100","rc123",70]}];

angular.forEach(cell, function(data){
    $scope.profiles.push(data);
});

您的HTML:

<table>
    <tr ng-repeat="profile in profiles track by $index" >
        <td ng-repeat="col in profile.cell track by $index">
            <label >{{col}}</label>
        </td>
    </tr>
</table>

答案 1 :(得分:0)

尝试以下代码。将标题作为json的单独部分并首先显示标题然后从index first

开始ng-repeat
<table border="1">
    <tr>
        <td>
            {{columns[0].cell[0]}}            
        </td>
        <td>
            {{columns[0].cell[1]}}            
        </td>
        <td>
            {{columns[0].cell[2]}}         
        </td>
    </tr>

    <tr ng-repeat="col in columns" ng-if="$index>0">
        <td>
            {{columns[$index].cell[0]}}            
        </td>
        <td>
            {{columns[$index].cell[1]}}            
        </td>
        <td>
            {{columns[$index].cell[2]}}         
        </td>
    </tr>
</table>