0

私は次のものを持っています：

events: [ 
  { name: 'first', date: '2012-11-01' },
  { name: 'second', date: '2012-11-05' },      
  { name: 'second II', date: '2012-11-05' },
  { name: 'third', date: '2012-11-08' },
]

結果をカレンダーのようにしたい:

  • 2012-11-01: 最初の [x]
  • 2012-11-02
  • 2012-11-03
  • 2012-11-04
  • 2012-11-05: 秒 [x]、秒 II [x]
  • 2012-11-06
  • 2012-11-07
  • 2012-11-08: 3 回目 [x]

イベントの最小日付と最大日付の間の日付の配列を作成するイベント コントローラーに範囲関数があります。各日付には、その日のイベントの配列もあります。

days [ { 
         date: '2012-11-01', 
         events: [ { name: 'second', date: '2012-11-05' } ], 
       },

       {
         date: '2012-11-01', 
         events: [], 
       }, ... ];

それをレンダリングするために、日をループしてからイベントをループしています。私が直面している問題は、リストに削除ボタン [x] があることです。EventController で呼び出される remove メソッドは、イベントを保持するメイン配列から要素を削除します。

だから私の質問は、イベント配列を直接レンダリングしていないときに、親コントローラーの EventsController がどのようにビューを更新するのかということです。

フィルターを使用してイベント付きのカレンダーを作成することは可能ですか?それにより、子コントローラーが要素を削除したときにビューが更新されないという問題が解決されますか?

4

1 に答える 1

0

イベントIDをご利用いただけます。

配列インデックスを ID として使用する簡単な例を次に示します。

html:

    {{日.日付}}: "{{イベント.名前}}" [×] 
イベント: {{ イベント | json}}
カレンダー: {{ カレンダー| json}}

js:

app.controller('MainCtrl', function( $scope ) {
  $scope.events =  [ 
    { name: 'first', date: '2012-11-01' },
    { name: 'second', date: '2012-11-05' },      
    { name: 'second II', date: '2012-11-05' },
    { name: 'third', date: '2012-11-08' }
  ];

  $scope.calendar = [
    { date: '2012-11-01' },
    { date: '2012-11-02' },
    { date: '2012-11-03' },
    { date: '2012-11-04' },
    { date: '2012-11-05' },
    { date: '2012-11-06' },
    { date: '2012-11-07' },
    { date: '2012-11-08' }
  ];
  $scope.$watch('events', function(events) {
    for (var j = 0; j < $scope.calendar.length; j++) {
      $scope.calendar[j].events = [];
      for (var i = 0; i < events.length; i++) {
        if ($scope.calendar[j].date == events[i].date) {
          $scope.calendar[j].events.push( {index: i, name: events[i].name} );
        }
      }
    }
  }, true);

  $scope.removeEvent = function(index) {
    delete $scope.events[index];
    $scope.events.splice(index, 1);
  };
});
于 2013-01-28T22:44:34.373 に答える