Question

我有以下内容：

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：first [x]
2012年11月2日
2012年11月3日
2012年11月4日
2012-11-05：second [x]，second II [x]
2012年11月6日
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在没有直接渲染事件数组时如何更新视图？

是否可以使用过滤器创建包含事件的日历，这是否可以解决子控制器删除元素时视图无法更新的问题？

Answer 1

您可以为活动使用ID。

以下是使用数组索引作为ID的简单示例。

HTML：

{{day.date}}： “{{event.name}}” [×]

events: {{ events | json }}

calendar: {{ calendar| 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);
  };
});

子控制器删除项目时更新父控制器

1 个答案: