Javascript 在AngularJS中使用循环和ng类创建包装器DIV

我目前正在使用AngularJS创建动态时间线。我的时间线中的数据是从JSON文件中获取的，我已经成功地配置了JSON文件。以下是我目前对PLNKR的了解：

这是我当前的导航：

   <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>

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

---

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

以下是总体思路：

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

eventsByDecade

array，angularjs将完成所有繁重的工作

以下是一些指导原则：

使用json文件填充

事件

变量后，创建一个数组并根据日期填充它。为此，您需要检查每个事件的

event.theDate.getFullYear（）

然后，根据年份，您可以使用

year.substring（0,2）

（仅使用前3位数字）获得十年

接下来，在一个数组中按十年对它们进行分组，然后将每个十年数组分配到主

eventsByDecade

数组中

最后，将中继器更改为：

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

要使用“分页”数组，请执行以下操作：

在这里，只要单击链接，就会设置

currentIndex

，例如：

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

---

哦，哇，非常感谢你的全面回复。我真的很感激。我稍后会尝试一下，在确认这个问题已经得到回答之前，看看它是如何进行的。非常感谢！我遇到了麻烦，一直在StackOverflow上搜索类似的问题，但没有成功。我在将JSON中的值输入控制器时遇到了问题——在获取$scope.events之后，如何更具体地从JSON中获取“date”值？我目前在函数方面遇到了问题（请原谅我缺乏知识/经验——我在这方面还是很新手！）。现在，我只能从每个日期事件中获取年份，但我正在努力将每个日期事件插入到其适当的十年数组中，然后将这些十年数组插入到主数组中。有点麻烦，@Ulises。你能快点看这个吗？它与你最初发布的问题没有什么不同，你是否忘记保存/更新它？

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

for(var event in events){
 event.theDate; //this object should have properties such as the date
}