Question

我正在尝试使用angularjs打印一个表，因为我是新手，所以无法找到更好的方法。我正在获取如下所示的数据

$scope.tableDatas = [{"dataMap":
                                {
                                    "INDUSTRIAL":["1","12","34"],
                                    "AXV":["0","18","12"],
                                    "COM":["1","1","3"],
                                    "IND":["1","1","3"],
                                    "IXM":["1","1","3"],
                                    "ADI":["1","1","3"]
                                    }

                                    }] ;

我想要打印一个表，其中INUSTRIAL，AXV ...是一列，其他是数据。请帮助我如何使用Angularjs渲染它？

Answer 1

检查这个问题可能是你正在寻找什么

http://jsfiddle.net/t69k62ft/

＆＃13;

Cloneable

＆＃13;

Cloneable

＆＃13;

function MyCtrl($scope) {
    $scope.tableDatas = [{"dataMap":
                      {
                          "INDUSTRIAL":["1","12","34"],
                          "AXV":["0","18","12"],
                          "COM":["1","1","3"],
                          "IND":["1","1","3"],
                          "IXM":["1","1","3"],
                          "ADI":["1","1","3"]
                      }
                      
                     }] ;
}

＆＃13;

Answer 2

如果你想要dyanamic，

将html更改为此

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
  <table>
    <tr>
      <td ng-repeat="(k, column) in tableDatas[0].dataMap">{{k}}</td>
    </tr>
    <tr ng-repeat="i in [0,1,2]  track by $index">
      <td ng-repeat="(k, column) in tableDatas[0].dataMap">{{column[i]}}
      </td>
    </tr>
  </table>
</div>

Answer 3

这可能是您的开始，JSFiddle here：

<div ng-controller="MyCtrl">
    <table>
        <tr>
            <td ng-repeat="(k, column) in tableDatas[0].dataMap">{{k}}</td>
        </tr>
        <tr>
            <td ng-repeat="column in tableDatas[0].dataMap">{{column}}</td>
        </tr>
    </table>
</div>

Answer 4

如果您可以将阵列更改为：

$scope.tableDatas = [{"INDUSTRIAL":["1", "12", "34"],
                     {"AXV":["0","18","12"],
                     etc

然后在你的html中写道：

<table>
      <tr ng-repeat="row in tableDatas">
           <td ng-repeat="data in row track by $index">
           </td>
      </tr>
</table>

这将创建6行（industrial，axv等），并在这些行上创建数据。

如果您无法更改阵列，可以这样做：

<table>
      <tr ng-repeat="row in tableDatas[0].dataMap">
           <td ng-repeat="data in row track by $index">
           </td>
      </tr>
</table>

使用angularjs

4 个答案: