以角度显示日历的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原样？

如果有任何其他信息可以帮助，请让我知道。

来源

2016-08-30 crowhill

你只是想创建一个日历？ – dwbartz

通过索引使用track以$索引“' – tommybananas

'value在[4，4] track by $ index'中删除[4，4]音轨中的重复问题'”值？你能发布一个更完整的例子吗？ – crowhill

好了，这样的答案竟然是相当简单的（感谢意见和下面的答案）。

如上面写的作品，只有这个微小的变化代码：

<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？而已。三个字改变。现在我不知道为什么它的作品，但我对谷歌的。谢谢大家。

来源

2016-08-30 22:42:10 crowhill

明显的答案是，你不能有重复的键。 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>

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

来源

2016-08-30 21:59:25 dwbartz

不起作用。创建了更多相同错误的实例，但我会查看链接。谢谢。 – crowhill

以角度显示日历的JSON列表作为日历

回答

相关问题