以角度显示日历的JSON列表作为日历
我有一个月的日子的JSON列表。以角度显示日历的JSON列表作为日历
像这样:
{
date: "2016-08-01T00:00:00",
weekday: 1,
},
{
date: "2016-08-02T00:00:00",
weekday: 2,
},
...
凡weekday: 1
指周一weekday: 2
是星期二。
所以,我知道这个月有多少天,我知道这个月是从哪一天开始的。
使用Angular获取JSON并创建视图,我想将上面的JSON显示为标准日历,即以七天的行数显示。
如:
<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
原样?
如果有任何其他信息可以帮助,请让我知道。
好了,这样的答案竟然是相当简单的(感谢意见和下面的答案)。
如上面写的作品,只有这个微小的变化代码:
<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
?而已。三个字改变。现在我不知道为什么它的作品,但我对谷歌的。谢谢大家。
明显的答案是,你不能有重复的键。 Angular默认使用该值进行跟踪,因此我认为当您到达第二周并且您再次打到星期天时,双倍重复会发生爆炸。
https://docs.angularjs.org/error/ngRepeat/dupes
你会想条款,同时指定日和周一起添加曲目。看看这是否适合你。
<table>
<tr ng-repeat="week in vm.month">
<td ng-repeat="day in week track by day+week">
{{day}}
</td>
</tr>
</table>
不起作用。创建了更多相同错误的实例,但我会查看链接。谢谢。 – crowhill
你只是想创建一个日历? – dwbartz
通过索引使用track以$索引“' – tommybananas
'value在[4,4] track by $ index'中删除[4,4]音轨中的重复问题'”值?你能发布一个更完整的例子吗? – crowhill