Question

我想知道如何使用table - 或divs来创建一个表格，它将显示下表：

|            | Season 1    | Season 2     |   ....up to season N    |
|:-----------|------------:|:------------:|                         |
| Title 1    | season.1.1  |  season.2.1  |                        |
| Title 2    | season.1.2  |  season.2.1  |                         |
| Title 3    | season.1.3  |  season.2.1  |                         |
| Title 4    |     ...     |      ...     |                         |
| Title 5    |     ...     |      ...     |                         |
| Title 6    |     ...     |      ...     |                         |

我的对象结构就像在表格中一样。我试图用以下内容来做这个表：

 <table class="table">
        <thead>
        <tr>
            <th></th>
            <th>Season 1</th>
            <th>Season 2</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Title 1</td>
            <th>...</th>
        </tr>
        <tr>
            <td>Title 2</td>
            <th>...</th>
        </tr>
        <tr>
            <td>Title 3</td>
            <th>....</th>
        </tr>
        </tbody>
    </table>

但是，这不符合我的数据结构。

关于如何解决这个问题的任何想法？当然，我想尽可能多地使用角度函数 - ng-repeats。

由于

Answer 1

这是表的动态模型：

<!doctype html>
<html ng-app="app" ng-controller="ctrl">

<head>
</head>

<body>

  <table>
    <thead>
      <tr>
        <th ng-repeat="th in tableData.thead">{{th.title}}</th>
      </tr>
    </thead>
    <tbody ng-repeat="tbody in tableData.tbody">
      <tr ng-repeat="tr in tbody">
        <td ng-repeat="td in tr">{{td.content}}</td>
      </tr>
    </tbody>
  </table>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
  <script>
    angular.module("app", []);
    angular.module("app").controller("ctrl", function($scope) {
      $scope.tableData = {
        //we have one thead in the table with 1 tr
        thead: [
          {
          title: ""
        },
          {
          title: "session 1"
        }, {
          title: "session 2"
        }, {
          title: "session 3"
        }],
        //we have 1 tbody in the table with "n" tr
        tbody: [
          {
          tr: []
        },
          {
          tr: [
            {
            content: "Title 1"
          },
            {
            content: "session 1"
          }, {
            content: "session 2"
          }, {
            content: "session 3"
          }]
        }, {
          tr: [
            {
            content: "Title 2"
          },
            {
            content: "session 1"
          }, {
            content: "session 2"
          }, {
            content: "session 3"
          }]
        }, {
          tr: [
            {
            content: "Title 3"
          },
            {
            content: "session 1"
          }, {
            content: "session 2"
          }, {
            content: "session 3"
          }]
        }]
      }
    });
  </script>
</body>

</html>

Answer 2

您应该更多地阐明数据结构。但是看看这个，看看它是你想要的还是根据你的需要修改它：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
   $scope.titles=['Title1', 'Title2', 'Title3'];
   $scope.seasons=['Season1', 'Season2', 'Season3'];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

 <table>
 <thead>
   <th></th>
   <th ng-repeat="s in seasons">{{s}}</th>
 </thead>
 <tbody>
   <tr ng-repeat="t in titles">
     <td>{{t}}</td>
     <td ng-repeat="s in seasons">{{s}}</td>
   </tr>
   
 </tbody>
 </table>
</div>

Answer 3

你可以做这样的事情。它适用于具有不同长度标题的季节，并且它完全动态地工作。

检查出来： http://plnkr.co/edit/ZqUCFQtfIcpn9hq1hlIr?p=preview

HTML代码：

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="script.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <table>
    <thead>
      <th></th>
      <th ng-repeat="s in seasons">{{s.name}}</th>
    </thead>
    <tbody>
      <td>
        <div ng-repeat="s in  maxtitle().title">title{{$index+1}}</div>
      </td>
      <td ng-repeat="s in  seasons">

        <div ng-repeat="t in  s.title">
          {{t}}
        </div>
      </td>
    </tbody>
  </table>
</div>

控制器代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.seasons = [{
    name: "Season1",
    title: ["1title1", "1title2", "1title3"]
  }, {
    name: "Season2",
    title: ["2title1", "2title2", "2title3", "2title4"]
  }, {
    name: "Season3",
    title: ["3title1", "3title2", "3title3"]
  }];

  $scope.maxtitle=function()
  {
    var max=0;
    var position=0;
    for (var i=0; i<$scope.seasons.length; i++) 
    {
     if( $scope.seasons[i].title.length>=max)
     {
       max= $scope.seasons[i].title.length;
       position=i;
     }
    }
    return $scope.seasons[position];
  }
});

如何在对象和列上使用ng-repeat？

3 个答案: