0

我想知道，是否可以在下拉菜单中仅动态添加当前和未来事件，而不加载旧事件。在我们当前的表单中，我们必须手动从脚本中删除事件，这不是一种有效的方法。

谢谢，任何指针将不胜感激。

<select name="Event" Height="18px" Width="187px">
                  <option value="" selected>Select One</option>
                  <option value="Charles Hall Committee Meeting">Charles Hall Committee Meeting- July 7 2013</option>
 <option value="Townhall Meeting">Townhall Meeting-September 12 2013</option>
</select>

这些事件需要显示在下拉列表中，如果日期结束则不应显示

4

1 回答 1

0

正如我之前提到的，MVC 框架将是一个不错的选择。不过，选择正确的 MVC 框架 - 你有很多选择。你甚至可以只用纯 Javascript 甚至 jQuery 来做到这一点——但 MVC 最终会让你的生活更轻松。我在下面提供的示例使用了 AngularJS（它很重，可能对您的预期用途来说太重了，但是一旦您开始使用 Angular，它会让您的生活变得超级轻松）。

我不会将这个答案作为关于 AngularJS 的教程，但我建议你从可以在线找到的各种资源（从Angular 的网站本身开始）中阅读关于它的教程和文档。这是演示如何使用 Angular 动态填充select下拉选项的示例 - 您可以按照该示例进行操作。

首先，我假设事件是具有name和date属性的对象数组。然后使用 Angular 的select指令，我们可以通过设置ngOptions（在此处记录）将这些项目显示为选项。下面的代码片段将使用所有事件<option>的属性填充元素。name

<select ng-model="event" ng-options="e.name for e in events">
  <option value="">Select Event</option>
</select>

现在我们想让它不显示已经过去的事件。处理此问题的“角度”魔法发生在filter您为app（自定义过滤器教程）创建的自定义项中。

app.filter('checkDates', function() {
  return function(event) {    
    var filterEvent = [];
    for (var i = 0, length = event.length; i < length; i++){
      if (event[i].date.getTime() >= Date.now()) filterEvent.push(event[i]);
    }
    return filterEvent;
  };
});

这将根据您编码的逻辑过滤掉模型中使用的对象数组。对于这种情况，所有大于今天日期的事件都将添加到过滤器中返回的新数组中。

然后，checkDates您在要过滤的模型上使用过滤器。因此，在ng-options定义您将使用的过滤器时（一旦您开始使用 angularjs，您就会意识到您还可以在哪里应用过滤器）。

<select ng-model="event" ng-options="e.name for e in events | checkDates">
  <option value="">Select Event</option>
</select>

关于过滤器的几个资源：什么是过滤器，在 angularjs 中使用过滤器。

同样，我强烈建议您也查看 AngularJS 的外部资源。正如之前提到的，这只是解决这个问题的一个 MVC 框架的一个例子，肯定还有更多的选择——但是选择一个 MVC 框架真的取决于个人喜好，我只是喜欢 AngularJS 提供的功能。

于 2013-08-30T19:44:18.723 回答