0

ドロップダウンメニューに現在および将来のイベントのみを動的に追加し、古いイベントをロードしないことが可能かどうか疑問に思っていました。現在のフォームでは、スクリプトからイベントを手動で削除する必要がありますが、これは効率的な方法ではありません。

ありがとうございます。

<select name="Event" Height="18px" Width="187px">
                  <option value="" selected>Select One</option>
                  <option value="Charles Hall Committee Meeting">Charles Hall Committee Meeting- July 7 2013</option>
 <option value="Townhall Meeting">Townhall Meeting-September 12 2013</option>
</select>

これらのイベントはドロップダウンに表示する必要があり、日付が過ぎている場合は表示しないでください

4

1 に答える 1

0

前述したように、MVC フレームワークは適切なオプションです。ただし、適切な MVC フレームワークを選択する - そこには多くのオプションがあります。純粋な Javascript や jQuery を使用してこれを行うこともできますが、MVC を使用すると、最終的に作業が楽になります。以下に示す例では、AngularJS を使用しています (これは非常に重く、意図した用途には重すぎるかもしれませんが、Angular を使い始めると、作業が非常に簡単になります)。

この回答を AngularJS のチュートリアルにするつもりはありませんが、オンラインで見つけることができるさまざまなリソース ( Angular のサイト自体から始めて) からチュートリアルとドキュメントを参照することをお勧めします。これは、角度を使用してドロップダウンのオプションを動的に設定する方法の例を示すデモselectです-従うことができます。

まず、イベントはnameとdate属性を持つオブジェクトの配列であると想定しています。次に、angular のselectディレクティブを使用して、これらの項目をオプションとして表示できますngOptions(ドキュメントはこちら)。以下のスニペットは、すべてのイベントのプロパティを<option>要素に入力します。name

<select ng-model="event" ng-options="e.name for e in events">
  <option value="">Select Event</option>
</select>

ここで、経過したイベントが表示されないようにしたいと考えています。これを処理する「Angular」マジックは、 (カスタム フィルターのチュートリアルfilter)用に作成したカスタムで発生します。app

app.filter('checkDates', function() {
  return function(event) {    
    var filterEvent = [];
    for (var i = 0, length = event.length; i < length; i++){
      if (event[i].date.getTime() >= Date.now()) filterEvent.push(event[i]);
    }
    return filterEvent;
  };
});

これにより、コーディングしたロジックに基づいて、モデルで使用されているオブジェクトの配列が除外されます。この場合、今日の日付より後のすべてのイベントが新しい配列に追加され、フィルターで返されます。

次に、フィルター処理checkDatesするモデルでフィルターを使用します。そのng-optionsため、使用するフィルターを定義します (angularjs を使い始めると、他にどこにフィルターを適用できるかがわかります)。

<select ng-model="event" ng-options="e.name for e in events | checkDates">
  <option value="">Select Event</option>
</select>

フィルターに関するいくつかのリソース:フィルターとは、 angularjs でフィルターを使用します。

繰り返しますが、AngularJS の外部リソースも調べることを強くお勧めします。前に述べたように、これはこの問題に対する MVC フレームワークの 1 つの例にすぎません。他にも選択肢があることは間違いありませんが、MVC フレームワークの選択は個人的な好みの問題であり、私は AngularJS が提供するパワーが気に入っています。

于 2013-08-30T19:44:18.723 に答える