javascript - 在 AngularJS 中使用循环和 ng-class 创建包装 DIV

Question

我目前正在使用 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 中获取年份，根据特定的十年组织事件，然后为每个十年添加一个包装器。

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

Answer 1

这是总体思路:

这与分页类似。从您的所有记录(事件)中获取十年，然后将它们分组为页面(每十年一页)。一旦您的转发器依赖于这个 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
}