创建使用循环和NG-类AngularJS包装DIV [英] Creating wrapper DIV using loops and ng-class in AngularJS

问题描述

我目前正在创建使用AngularJS一个动态的时间表。从我的时间表的数据是从JSON文件，我已经在配置能够成功取出。以下是我目前对PLNKR： http://plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8

I'm currently working on creating a dynamic timeline using AngularJS. The data from my timeline is fetched from a JSON file, which I have already been successfully able at configuring. Here is what I currently have on 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>

我基本上要创建包装的div为十年20世纪60年代的唯一ID的，十年1970等，以便用户可以使用导航来有效地浏览到十年，他们最感兴趣的看着。日期是从JSON文件解析的，所以我想知道它还有另外一个从JSON获取的一年，根据几十年来特别组织的活动，然后添加一个包装的每个十年。

I basically want to create wrapper divs for the unique ID's of "decade-1960s", "decade-1970s" etc so that the user can use the navigation to efficiently navigate to the decade they are most interested in looking at. The date is parsed from the JSON file, so I am wondering it there is another to fetch the year from the JSON, organize the events according to particular decades, and then add a wrapper for each decade.

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

Thanks very much! I know it sounds very complicated! But I'm more of a front-end developer and designer, not so much a back-end programmer.

推荐答案

这里的总体思路

这是类似于分页。从您的所有记录（事件），然后将其整合到网页（每十年一个）获取的十年。一旦你的中继器依赖于这一 eventsByDecade 阵列，angularjs将尽一切繁重。

This is similar to paging. Get the decade from all your records (events) and then group them into pages (one per decade). Once your repeater relies on this eventsByDecade array, angularjs will do all the heavy lifting.

这里有一些准则：

在您填充您的事件变量与您的JSON文件，创建一个数组，并根据日期来填充它。为此，您需要检查 event.theDate.getFullYear（）的每个事件。

After you populate your events variable with your json file, create an array and populate it depending on the dates. For this you will need to check event.theDate.getFullYear() on each event.

然后，根据当年那么你可以得到的十年，也许使用 year.substring（0,2）（使用只是第3位）。

Then, depending on the year you can then get the decade, maybe using year.substring(0,2) (use just the first 3 digits).

接下来，在一个数组，然后分配每个十年阵列高手进组由他们十年 eventsByDecade 阵列。

Next, group them by decade in an array and then assign each decade array into a master eventsByDecade array.

最后，你的中继距离变化：

Finally, change your repeater from:

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

要使用你的分页数组：

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

在这里， CURRENTINDEX 每当被点击的链接将被设置，例如：

Here, currentIndex will be set whenever the links are clicked, for example:

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

更新：操纵JSON

JSON结果为JavaScript对象。所以，你可以遍历你的事件是这样的：

JSON Evaluates to JavaScript Objects. So you can iterate over your events like this:

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

这篇关于创建使用循环和NG-类AngularJS包装DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！