2

我目前正在使用 AngularJS 创建动态时间线。我的时间线中的数据是从我已经成功配置的 JSON 文件中获取的。这是我目前在 PLNKR 上的内容：http: //plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8

这是我目前的导航：

   <nav id="sticky-navigation">
      <ul>
          <li><a href="#decade-1960s">1960</a></li>
          <li><a href="#decade-1970s">1970</a></li>
          <li><a href="#decade-1980s">1980</a></li>
          <li><a href="#decade-1990s">1990</a></li>
          <li><a href="#decade-2000s">2000</a></li>
          <li class="active"><a href="#decade-2010s">2010-Now</a></li>
      </ul>
  </nav>

我基本上想为“decade-1960s”、“decade-1970s”等的唯一 ID 创建包装 div，以便用户可以使用导航有效地导航到他们最感兴趣的十年。日期是从 JSON 文件中解析出来的，所以我想知道还有另一个从 JSON 中获取年份，根据特定的十年组织事件，然后为每个十年添加一个包装器。

非常感谢！我知道这听起来很复杂！但我更多的是前端开发人员和设计师，而不是后端程序员。

4

1 回答 1

2

这是一般的想法：

这类似于分页。从您的所有记录（事件）中获取十年，然后将它们分组到页面中（每十年一个）。一旦你的中继器依赖于这个eventsByDecade数组，angularjs 将完成所有繁重的工作。

以下是一些指导方针：

使用 json 文件填充events变量后，创建一个数组并根据日期填充它。为此，您需要检查event.theDate.getFullYear()每个事件。

然后，根据年份，您可以获得十年，也许使用year.substring(0,2)（仅使用前 3 位数字）。

接下来，将它们按十年分组到一个数组中，然后将每个十年数组分配到一个主eventsByDecade数组中。

最后，将中继器从以下位置更改：

ng-repeat="event in events | filter:query | orderBy:orderProp:true"

使用您的“分页”数组：

ng-repeat="event in eventsByDecade[currentIndex] | filter:query | orderBy:orderProp:true"

在这里，currentIndex每当点击链接时都会设置，例如：

<li><a href="#decade-1960s" ng-click="currentIndex = 1">1960</a></li>

更新：操作 json

JSON 评估为 JavaScript 对象。所以你可以像这样迭代你的事件：

for(var event in events){
 event.theDate; //this object should have properties such as the date
}
于 2013-01-16T17:22:59.437 回答