Question

我想生成一个具有三列名称的html表（这最终将成为图像，但是对于示例来说一切正常）。我的数据有多行人的名字。我将其分为三列进行显示。无论我尝试了什么，我得到的行为都是每个名字重复三次，每列一次。

这是我的html代码：

<!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://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="content" >
    <h2>In memory of those classmates who have passed on. Our thoughts are with their families and friends. Our memories are of those days when we were all together</h2>
    <div class="container">
      <table class="table-bordered">
        <tr ng-repeat="alumni in data.members | filter:alumni.columnNumber">
          <td alumni.columnNumber="1">{{alumni.firstName + ' ' + alumni.lastName}}</td>
          <td alumni.columnNumber="2">{{alumni.firstName + ' ' + alumni.lastName}}</td>
          <td alumni.columnNumber="3">{{alumni.firstName+ ' ' + alumni.lastName}}</td>
        </tr>
      </table>
    </div>
  </div>
</body>
 </html>

这是angularJs控制器代码：

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

app.controller('MainCtrl', function($scope) {

var vm = $scope;
vm.graduationYear = 1978;
vm.alumniInfo = {
alumniId: '',
firstName: '',
lastName: '',
columnNumber: '',
sortOrder: ''
};
vm.data = {
 "members" : [{
  "alumniId": 444,
  "firstName": "Fred",
  "lastName": "Flintstone",
  "columnNumber": 1,
  "sortOrder": 0
}, {
  "alumniId": 657,
  "firstName": "Barney",
  "lastName": "Rubble",
  "columnNumber": 1,
  "sortOrder": 0
}, {
  "alumniId": 647,
  "firstName": "Wile E",
  "lastName": "Coyote",
  "columnNumber": 2,
  "sortOrder": 0
}, {
  "alumniId": 655,
  "firstName": "Road",
  "lastName": "Runner",
  "columnNumber": 2,
  "sortOrder": 0
}, {
  "alumniId": 651,
  "firstName": "Bugs",
  "lastName": "Bunny",
  "columnNumber": 3,
  "sortOrder": 0
}, {
  "alumniId": 656,
  "firstName": "Quickstraw",
  "lastName": "McGraw",
  "columnNumber": 3,
  "sortOrder": 0
}]
}
});

期望的行为将在表的第一栏中显示Fred Flintstone和Barney Rubble，在第二栏中显示Wiley Coyote和Roadrunner，在第三栏中显示Bugs Bunny和Quickstraw McGraw。但是，我要在三列中的每列中获取每个名称。

Plunkr：http://plnkr.co/edit/eUQw248AGjMZsPo9uxid?p=preview

Answer 1

您可以使用CSS Columns而不是使用表，以一种更加优雅的方式来实现类似的功能。这是要替换的代码：

<div class="container">
  <div style="column-count: 3">
    <div ng-repeat="alumni in data.members">
      {{ alumni.firstName + ' ' + alumni.lastName }}
    </div>
  </div>
</div>

例如，您可以在以下位置查看此矮人车：http://next.plnkr.co/edit/fFkdVbPxRkVp2wTy

Answer 2

有一个用于表的程序包，它具有很好的功能。您可能需要稍稍修改数据格式，然后再进行操作。

http://ng-table.com/#/

按列（td）过滤，每个角度

2 个答案: