Question

我的REST API返回数百行数据，如下所示：

[
 {"roman_number":"I"},
 {"roman_number":"II"},
 {"roman_number":"III"},
 {"roman_number":"IV"}
 {"roman_number":"V"},
 {"roman_number":"VI"},
 {"roman_number":"VII"},
 {"roman_number":"VII"},
...
 {"roman_number":"MMI"}
]

我希望能够在表格中显示数据......

<table border=1>
  <tr><td>I</td><td>II</td><td>III</td><td>IV</td></tr>
  <tr><td>V</td><td>VI</td><td>VII</td><td>VIII</td></tr>
  <tr><td>IX</td><td>X</td><td>XI</td><td>XII</td></tr>
  <tr><td>XIII</td><td>XIX</td><td>XX</td><td>XXI</td></tr>
  <tr><td colspan=4> pagination here </td></tr>
 </table>

我希望我以角度执行此操作，因为我使用角度HTTP与我的REST API进行通信。感谢。

根据Partha Sarathi Ghosh的建议更新。

我有这个app文件：

var app = angular.module("myApp", ['smart-table']);

angular.module('myApp').filter('chunkby', function() {
  return function(input, chunk) {
    var i,j,temparray=[];
    if(! input ) { return; }
    for (i=0,j=input.length; i<j; i+=chunk) {
      temparray.push(input.slice(i,i+chunk));
    }
    return temparray;
  };
});

......我有这个HTML ...

 <table>
 <tr ng-repeat="row in (all_types|chunkby:5)">
 <td ng-repeat="col in row">{{col}}</td>
 </tr>
 </table>

...但我在控制台中收到此错误...

Error: [$rootScope:infdig] ...

...但数据显示正常。我注意到plunker演示也会出现这个错误。

Answer 1

尝试此自定义过滤器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = [0,1,2,3,4,5,6,7,8,9,10,11, 12,13,14,15];
});

angular.module('plunker').filter('chunkby', function() {
  return function(input, chunk) {
    var i,j,temparray=[];
    for (i=0,j=input.length; i<j; i+=chunk) {
      temparray.push(input.slice(i,i+chunk));
    }
    return temparray;
  };
});

<!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.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table border=1>
      <tr ng-repeat="row in (data|chunkby:4)">
        <td ng-repeat="col in row">{{col}}</td>
      </tr>
    </table>
  </body>

</html>

Plunker Here

如何用angularjs以表格格式显示单列数据？

1 个答案: