AngularUIのui-calendarを使ってみた、ng-model編

  • 投稿日:
  • by

AngularUIのui-calendarを使ってみた に続き、ng-modelを使ってみました。

まず、ng-modelに指定するのは、events配列ではなく、eventSources配列です。しかし、eventSourceオブジェクトの配列ではありません。

events配列というのは、

[
  {
    title: 'event1',
    start: '2013-05-18'
  },
  {
    title: 'event2',
    start: '2013-05-19'
  }
]

というものです。一方、eventSourceオブジェクトというのは、

{
  events: [
            {
              title: 'event1',
              start: '2013-05-18'
            },
            {
              title: 'event2',
              start: '2013-05-19'
            }
          ]
}

です。なぜ、こういう仕組みになっているかというと、events:にURLや関数を指定できるようにするためです。 詳細は、ドキュメントをご覧ください。

さて、繰り返しになりますが、ng-modelに指定する変数が持つ値は、eventSources配列です。ですが、これは、eventSourceオブジェクトの配列とは異なるようです。結論から言うと、次のようにしたらうまく行きました。

[
  [
    {
      title: 'event1',
      start: '2013-05-18'
    },
    {
      title: 'event2',
      start: '2013-05-19'
    }
  ]
]

つまり、eventSourceオブジェクトのevents:の値の配列のようです。これを、eventSources配列と呼ぶことになっているのでしょうか。どこかにドキュメントがあるのかもしれませんが、見つからなかったので覚え書きです。