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>

私は基本的に、「1960 年代の 10 年代」、「1970 年代の 10 年代」などの一意の ID のラッパー div を作成して、ユーザーがナビゲーションを使用して、最も関心のある年代に効率的に移動できるようにしたいと考えています。日付は JSON ファイルから解析されるため、JSON から年を取得し、特定の 10 年に従ってイベントを整理し、10 年ごとにラッパーを追加する別の方法があるのではないかと考えています。

どうもありがとう！私はそれが非常に複雑に聞こえることを知っています! しかし、私はフロントエンドの開発者およびデザイナーであり、バックエンドのプログラマーではありません。

4

1 に答える 1

2

一般的な考え方は次のとおりです。

これはページングに似ています。すべての記録 (イベント) から 10 年間を取得し、それらをページにグループ化します (10 年間に 1 つ)。リピーターがこのeventsByDecade配列に依存すると、angularjs がすべての面倒な作業を行います。

以下にいくつかのガイドラインを示します。

events変数に json ファイルを設定したら、配列を作成し、日付に応じて設定します。event.theDate.getFullYear()そのためには、各イベントをチェックする必要があります。

次に、年に応じて、おそらく使用して 10 年を取得できますyear.substring(0,2)(最初の 3 桁のみを使用)。

次に、それらを 10 年ごとに配列にグループ化し、各 10 年配列をマスター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 に答える