如何用ng-repeat填充表中的列

时间：2017-02-14 10:53:27

标签： angularjs

通常在表格中使用ng-repeat填充行而不是列。但在我的情况下，不幸的是，来自服务器的响应如下：

[
       [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}],
       [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}],
       [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}],
       [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}],
      ]

但我需要在他们自己的专栏中列出名字，在他们的专栏中使用年龄等等。当我尝试使用ng-repeat时，它会重复行中的单元格，而不是列。我如何逐个填充列，首先是名字，年龄等等？

＆＃13;
＆＃13; 
angular.module('App', [])
  .controller('Ctrl', function($scope) {
    $scope.arr = [
       [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}],
       [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}],
       [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}],
       [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}],
      ]
  });
＆＃13; 
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
＆＃13; 
<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">

    <table class="tg">
      <tr>
        <th class="tg-s6z2">name</th>
        <th class="tg-s6z2">age</th>
        <th class="tg-s6z2">sex</th>
        <th class="tg-s6z2">eyes color</th>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
      <tr>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
        <td class="tg-s6z2"></td>
      </tr>
    </table>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

根据您提供的JSON，这是您的要求。

您可以使用ng-repeat的力量并使用 $index 来完成解决方案。

＆＃13;
＆＃13; 
angular.module('App', [])
  .controller('Ctrl', function($scope) {
    $scope.arr = [
       [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}],
       [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}],
       [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}],
       [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}],
      ]
  });
＆＃13; 
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
＆＃13; 
<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">

    <table class="tg">
      <tr>
        <th class="tg-s6z2">name</th>
        <th class="tg-s6z2">age</th>
        <th class="tg-s6z2">sex</th>
        <th class="tg-s6z2">eyes color</th>
      </tr>
      <tr ng-repeat="a in arr[0]">
        <td class="tg-s6z2">{{a.name}}</td>
        <td class="tg-s6z2">{{arr[1][$index].age}}</td>
        <td class="tg-s6z2">{{arr[2][$index].sex}}</td>
        <td class="tg-s6z2">{{arr[3][$index].eyes}}</td>
      </tr>
    </table>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

请跑上面的SNIPPET

HERE IS A WORKING DEMO

答案 1 :(得分：1)

在这里：http://codepen.io/DaniloPolani/pen/BpMrvg

逻辑是迭代保存索引的数组（使用angular，您可以使用track by $index执行此操作。）

使用该索引，您可以为每个属性（arr[0][$index].name检索正确的数组位置，其中arr[0]是名称数组，$index是当前元素的位置）。您可以了解更多here。

但是请编辑你的数组，它更好（代码和眼睛）用所有参数制作关联数组。所以一组数组与眼睛，名字等一起。

$scope.arr = [
  {
    name: 'John',
    eyes: 'brown'
  }
];

答案 2 :(得分：0)

angular.module('App', [])
  .controller('Ctrl', function($scope) {
    $scope.arr = [
       [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}],
       [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}],
       [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}],
       [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}],
      ]
  });
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">

    <table class="tg">
      <tr>
        <th class="tg-s6z2">name</th>
        <th class="tg-s6z2">age</th>
        <th class="tg-s6z2">sex</th>
        <th class="tg-s6z2">eyes color</th>
      </tr>
      <tr ng-repeat="a in arr">
       
        <td class="tg-s6z2">{{a.name}}</td>
        <td class="tg-s6z2">{{a.age}}</td>
        <td class="tg-s6z2">{{a.sex}}</td>
        <td class="tg-s6z2">{{a.eyes}}</td>
      </tr>
    </table>
  </body>

</html>

答案 3 :(得分：0)

如果您无法访问服务器以更改数据格式（这将是最佳解决方案），请使用自定义功能并在控制器中正确格式化。

使用formatArray，您可以使用过滤器，例如orderBy，启用搜索功能等。

＆＃13;
＆＃13; 
angular.module('App', [])
  .controller('Ctrl', function($scope) {
    $scope.arr = [
       [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}],
       [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}],
       [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}],
       [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}],
      ]


    var formatArray = function (arr) {
      var formated = [];

      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].length; j++) {
          if (!formated[j] && formated.length === j) {
            formated.push({});
          }
          for (prop in arr[i][j]) {

            formated[j][prop] = arr[i][j][prop];
          }
        }
      }

      return formated;
    };

    $scope.formatedArray = formatArray($scope.arr);
  });
＆＃13; 
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
＆＃13; 
<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">

    <table class="tg">
      <tr>
        <th class="tg-s6z2">name</th>
        <th class="tg-s6z2">age</th>
        <th class="tg-s6z2">sex</th>
        <th class="tg-s6z2">eyes color</th>
      </tr>
      <tr ng-repeat="item in formatedArray">
        <td class="tg-s6z2" ng-bind="item.name"></td>
        <td class="tg-s6z2" ng-bind="item.age"></td>
        <td class="tg-s6z2" ng-bind="item.sex"></td>
        <td class="tg-s6z2" ng-bind="item.eyes"></td>
      </tr>
    </table>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题