Wijmo UI for the Web
AngularJS と wijdropdown
Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS と Decorator ウィジェット > AngularJS と wijdropdown
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijdropdown を HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「 AngularJS Directive Gallery」内の「Wijmo Charts」を参照してください。

  1. 任意のテキストエディタで、新たな HTML ページを作成します。これには、次のコードを追加し、拡張子 .html を付けてドキュメントを保存します。
  2. 依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「 wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。
    • 1 つは AngularJS 自身です。
    • もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

    ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {}
</script>
  4. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。
    • <wij-dropdown> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • height および width オプションを設定します。
    • マークアップ内で要素をネストして、ヘッダ、グループ、オプション、およびドロップダウンから選択されたオプションを設定します。
      • optgroup ディレクティブ内で、ラベルと値を設定します。
      • ドロップダウンから選択されたフィールドを表示するための、いずれか 1 つのオプションを選択します。
      • ドロップダウンのタイトルを表示するためのヘッダテキストを設定します。
    マークアップ
    コードのコピー 
    <p> <h3> Select your destination:<h3> 
 <select wij-dropdown style="height:100px; width:150px">
<optgroup label="United States">
   <option>New York</option>
   <option selected="selected">Los Angeles</option>
   <option>Chicago</option>
   <option>Houston</option>
   <option>Philadelphia</option>
</optgroup>
 <optgroup label="Canada" >
    <option>Toronto</option>
    <option>Montreal</option>
    <option>Vancouver</option>
    <option>Ottawa</option>
    <option>Calgary</option>
  </optgroup>
</select>
</p>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

 

 

Copyright © GrapeCity inc. All rights reserved.