Question

所以这是场景： 我有一个json数组的节目（ 按日期排序 ），每个节目都是一个带有所有节目详情的json（包括节目的确切日期（一个JavaScript日期对象））。我希望将所有节目显示为按日期排序的表格，并在所有日期显示之前显示日期标题。像这样的东西：

日期：18/2
- 4:00 | show_name | show_location
- 5:00 | show_name | show_location
- 6:00 | show_name | show_location
日期：19/2
- 2:00 | show_name | show_location
- 3:00 | show_name | show_location
- 4:30 | show_name | show_location
日期：20/2
- 12:30 | show_name | show_location
- 3:00 | show_name | show_location
- 5:00 | show_name | show_location

现在，我想到这一点的唯一方法是迭代所有节目，并为每个节目插入地图，其中键作为日期，值是该日期的节目数组。然后创建另一个数组（用于ng-repeat），每天包含一个带有日期和节目数组的json。然后用angular的ng-repeat重复显示表格中的最后一个数组

这是代码：

<script> 
var shows = [{name:"...",location:"...",date:<dateObject>},{name:"...",location:"...",date:<dateObject>},{},{},{},...];
var map = {};
var $scope.daysArray = []
shows.forEach(function(show){
    var date = show.getLocaleDateString(); //the key of the map is the date portion of the JS Date Object
    if (!map[date]) 
    {
        map[date] = [];
    }
    map[date].push(show);
});


for (date in map)
{
    $scope.daysArray.push({date: date ,shows: map[date]}); 
}
</script>

<html>
....
<table>
    <tbody ng-repeat="day in daysArray">
            <tr><td>{{day.date}}<td></tr>
            <tr ng-repeat="show in day.shows">
                <td>{{show.time}}</td>
                <td>{{show.name}}</td>
                <td>{{show.location}}</td>
            </tr>
    </tbody>
</table>


</html>

是否有更简单/更优雅的解决方案？

我很乐意这样做：

<table>
    <tr ng-repeat="show in shows">
        <td>{{show.time}}</td>
        <td>{{show.name}}</td>
        <td>{{show.location}}</td>
    </tr>
</table>

但是如何在具有相同日期的节目之前添加日期tr标题？谢谢！

将json数组显示为表，按日期排序（日期行作为标题）

是否有更简单/更优雅的解决方案？

0 个答案: