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]，第二[x]
  • 2012-11-06
  • 2012-11-07
  • 2012-11-08：第三[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:

    {{ day.date }}: "{{ event.name }}" [×] 
事件：{{ 事件 | 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 回答