按列（td）過濾，每個角度

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列以更優雅的方式實現類似的功能。 這是要替換的代碼：

<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 個解決方案

解決方案1
3 已采納 2018-07-21 04:39:40

解決方案2
0

按列（td）過濾，每個角度

問題描述

2 個解決方案

解決方案1 3 已采納 2018-07-21 04:39:40

解決方案2 0

解決方案1
3 已采納 2018-07-21 04:39:40

解決方案2
0