如何在嵌套数据上进行ng-repeats产生平坦输出?

时间:2017-08-24 18:37:30

标签: angularjs

我有一些嵌套数据(Python代码):

groups = [
    ['a', 'b', 'c'],
    ['a', 'b', 'c'],
    ['a', 'b', 'c']
]

我试图将其作为表行(Python代码)的平面列表呈现:

for group_idx, group in enumerate(groups):
    for item_idx, item in enumerate(group):
        print(f'<tr><td> { group_idx }: { item } </td></tr>')

这是我需要的输出:

<tr><td> 0: a </td></tr>
<tr><td> 0: b </td></tr>
<tr><td> 0: c </td></tr>
<tr><td> 1: a </td></tr>
<tr><td> 1: b </td></tr>
<tr><td> 1: c </td></tr>
<tr><td> 2: a </td></tr>
<tr><td> 2: b </td></tr>
<tr><td> 2: c </td></tr>

如果重要的话,我会对组和组项进行排序和过滤。

1 个答案:

答案 0 :(得分:1)

请检查这是否符合您的要求:

代码:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.tableData=  [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'k']
]

});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <table style="border:1px solid black">
      <tr ng-repeat="data in tableData">
        <td ng-repeat="tdata in data" style="border:1px solid black">{{$parent.$index}}:{{tdata}}</td>
      </tr>
    </table>
  </body>

</html>