在 angularjs 中实现带有行和列标题的表格答案

【问题标题】：Implement table with both row and column headers in angularjs在 angularjs 中实现带有行和列标题的表格
【发布时间】：2017-07-30 03:53:45
【问题描述】：

我有一个表，它既有行标题又有列标题。目前，行标题的值也存在于我检索以显示在表中的 json 中。所以我直接在角度表达式中映射了行标题。问题是，如果从 json 中检索数据时出现错误，则根本不会显示行标题。我想在没有响应的情况下显示带有行和列标题的空表。请告诉我如何实施。如果我从json中取出行标题并直接用行和列标题制作一个表格，我将如何显示从json接收到的数据？这是我的代码：

HTML

<body ng-controller="jsonCtrl">    
<table class="table table-striped table-bordered">
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr ng-repeat="data in timetable">
<th scope="row">{{data.time}}</th>
<td>{{data.Monday}}</td>
<td>{{data.Tuesday}}</td>
<td>{{data.Wednesday}}</td>
<td>{{data.Thursday}}</td>
<td>{{data.Friday}}</td>
</tr>
</table>
</body>

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

myApp.controller('jsonCtrl', function($scope, $http){
$http.get('timetable.json').success(function (data){
    $scope.timetable = data;
});
});

JSON

[
  {
    "Monday": "Physics",
    "Tuesday": "Chemistry",
    "Wednesday": "Maths",
    "Thursday": "English",
    "Friday": "Computers",
    "time": "09:00 - 11:00"
  },
  {
    "Monday": "Maths",
    "Tuesday": "Games",
    "Wednesday": "Physics",
    "Thursday": "Computers",
    "Friday": "Chemistry",
    "time": "11:00 - 13:00"
  },
  {
    "Monday": "Computers",
    "Tuesday": "Physics",
    "Wednesday": "Maths",
    "Thursday": "German",
    "Friday": "History",
    "time": "13:00 - 15:00"
  },
  {
    "Monday": "Accounts",
    "Tuesday": "Maths",
    "Wednesday": "Physics",
    "Thursday": "French",
    "Friday": "Chemistry",
    "time": "15:00 - 17:00"
  }

]

这里是 plunker 链接以获得更好的解释。 json 中存在的“时间”必须是行标题。 https://plnkr.co/edit/SZP9tdRX7pD9oaT9uOR1?p=preview

【问题讨论】：

如果json没有响应，你需要用空行来实现表吗？
是的@Kanya。它应该只显示带有空表的行和列标题。

标签： angularjs html-table row

【解决方案1】：

如果 http 调用失败，您可以使用这样的数组：

[
  {
    "time": "09:00 - 11:00"
  },
  {
    "time": "11:00 - 13:00"
  },
  {
    "time": "13:00 - 15:00"
  },
  {
    "time": "15:00 - 17:00"
  }

]

因此必须更改控制器：

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

myApp.controller('jsonCtrl', function($scope, $http){
$http.get('timetable.json').then(function (data){
    $scope.timetable = data;
},
//error callback
function (response){
$scope.timetable = [
  {
    "time": "09:00 - 11:00"
  },
  {
    "time": "11:00 - 13:00"
  },
  {
    "time": "13:00 - 15:00"
  },
  {
    "time": "15:00 - 17:00"
  }

]
}
);
});

【讨论】：

这个解决方案工作正常，但我只是想知道是否有更好的方法来实现这一点。
并非如此。我的意思是，您可以用生成间隔的 for 循环替换硬编码数组，但除此之外，我不知道如何改进它。但我不得不说，如果发生错误，我不喜欢向用户显示此类信息的想法。用户可能认为日程表是空的。我认为您应该通知它发生了错误。
我刚刚为这个问题分享了一个 plunker 示例，但在我的实际应用程序中显示对用户的空响应是一个有效的场景。感谢@robert 的帮助。
很高兴能帮上忙