以角度顯示日曆的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列表作爲日曆

回答

相關問題