Question

我有一个月内JSON的日期列表。

像这样：

{
    date: "2016-08-01T00:00:00",
    weekday: 1,
},
{
    date: "2016-08-02T00:00:00",
    weekday: 2,
},
...

weekday: 1表示星期一，weekday: 2是星期二。

所以，我知道这个月有多少天，我知道这个月的哪一天开始。

使用Angular获取JSON然后创建一个视图，我想将上面的JSON显示为标准日历，即7天的行。

如：

    <table>
        <tr>
            <td>sun</td>
            <td>mon</td>
            <td>tue</td>
            <td>wed</td>
            <td>thr</td>
            <td>fri</td>
            <td>sat</td>
        </tr>
        <tr>
            <td>day 1</td>
            <td>day 2</td>
            <td>day 3</td>
            <td>day 4</td>
            <td>day 5</td>
            <td>day 6</td>
            <td>day 7</td>
        </tr>
        ....
    </table>

似乎有两个广泛的解决方案：

1）使用一些非常奇特的视图逻辑。计数器有很多ng-repeats和ng-init。如果有可能的话，这似乎很难也很难看。

2）创建一个数组，然后使用嵌套的ng-repeats来显示数据。

var calendar = function(){
    var firstDay = data[0].weekday;
    vm.month = [];
    var week = [];
    for(var i=0; i < data.length; i++){
        var day = data[i];
        if(i===0){
            while(firstDay > 0){
                week.push(null);
                firstDay --;
            }
        }
        if(week.length === 7){
            vm.month.push(week);
            week = [];
        }
        week.push(day);
    }

    console.log(vm.month);
}

效果很好。日历数组包含包含日期信息的周数组。要显示它，我只需要几个ng-repeats：

<table>
    <tr ng-repeat="week in vm.month">
        <td ng-repeat="day in week">
            {{day}}
        </td>
    </tr>
</table>

除了没有。我收到以下错误：

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.

我怀疑我需要将我的数组转换为JSON对象，但我不知道该怎么做。

或许有一种方法可以使用嵌套的ng-repeats来使用数组吗？

如果有任何其他信息可以提供帮助，请告知我们。

Answer 1

明显的答案是，你不能有重复的密钥。 Angular默认使用该值进行跟踪，所以我认为当你到达第二周并且再次击中星期天时，那里的双重重复将会爆炸。

https://docs.angularjs.org/error/ngRepeat/dupes

您想要添加一个track by子句，它同时指定日期和星期。看看这是否适合你。

<table>
    <tr ng-repeat="week in vm.month">
        <td ng-repeat="day in week track by day+week">
            {{day}}
        </td>
    </tr>
</table>

编辑：可能是相关的 ng-repeat with track by over multiple properties

Answer 2

好的，答案结果相当简单（感谢评论和下面的答案）。

上面编写的代码只需稍作修改就可以了：

<table class="ru-calendar">
    <tr ng-repeat="week in vm.month">
        <td ng-repeat="day in week track by $index">
            {{day.date | date:'d' }}
        </td>
    </tr>
</table>

请参阅track by $index？就是这样。三个字改变。现在我不知道为什么它可以运作，但我已经去了Google。谢谢大家。

以角度

2 个答案: