2016-08-30 8 views
1

月のJSONリストがあります。そのようJSONの日付リストをカレンダーとして表示する

weekday: 1は月曜日、weekday: 2は火曜日であることを意味し

{ 
    date: "2016-08-01T00:00:00", 
    weekday: 1, 
}, 
{ 
    date: "2016-08-02T00:00:00", 
    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-repeatsng-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); 
} 

素晴らしいです。カレンダー配列には、曜日情報を含む週配列が含まれています。無除き

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

:それを表示するには、私が必要とするすべてはng-repeatsのカップルです。私は次のエラーを取得する:

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

私はJSONオブジェクトに私の配列を回すが、私はそれを行う方法がわからない必要があると思います。

または、配列をそのままネストされたng-repeatsと一緒に使用する方法がありますか?

他に役立つ情報がある場合は、教えてください。

+0

あなたはカレンダーを作成しようとしていますか? – dwbartz

+1

[4,4]トラックの重複問題を[4,4]トラックの$ index "' – tommybananas

+0

'値で削除するために、インデックスによるトラックを使用しますか?より完全な例を投稿できますか? – crowhill

答えて

0

関連するかもしれないが、そう答えは(コメントや下記の回答のおかげで)かなり簡単であることが判明しました。ちょうどこのマイナーチェンジで、作品の上に書かれたよう

コード:

<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を参照してください?それでおしまい。 3つの言葉が変わる。今私は知らないなぜそれは動作しますが、私はGoogleを離れている。皆さんありがとう。

0

明らかな答えは、重複するキーを持つことはできません。 Angularはデフォルトでトラッキングする値を使用しているので、二重反復することは2週間目になり、再び日曜日にヒットすると爆発すると思います。

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

+0

動作しません。同じエラーのインスタンスをさらに多く作成しましたが、リンクを見ていきます。ありがとう。 – crowhill

関連する問題