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

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

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

  1. 新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
    • <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
    • <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。

    ドロップダウンからマークアップをコピーします

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

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

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、単純なコントローラーを作成します。      
    • コントローラーで $scope パラメータを使用して、データコンテキストを制御します。
    • 2 つのスコープを作成します。val スコープは使用する初期値を設定します。
    • states スコープは、コンボボックスの全状態に対する名前および値のリストを提供します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.val = "PA";
        $scope.states = [
            { name: "Alabama", value: "AL" },
            { name: "Alaska", value: "AK" },
            { name: "Arizona", value: "AZ" },
            { name: "Arkansas", value: "AR" },
            { name: "California", value: "CA" },
            { name: "Colorado", value: "CO" },
            { name: "Connecticut", value: "CT" },
            { name: "Delaware", value: "DE" },
            { name: "Florida", value: "FL" },
            { name: "Georgia", value: "GA" },
            { name: "Hawaii", value: "HI" },
            { name: "Idaho", value: "ID" },
            { name: "Illinois", value: "IL" },
            { name: "Indiana", value: "IN" },
            { name: "Iowa", value: "IA" },
            { name: "Kansas", value: "KS" },
            { name: "Kentucky", value: "KY" },
            { name: "Louisiana", value: "LA" },
            { name: "Maine", value: "ME" },
            { name: "Maryland", value: "MD" },
            { name: "Massachusetts", value: "MA" },
            { name: "Michigan", value: "MI" },
            { name: "Minnesota", value: "MN" },
            { name: "Mississippi", value: "MS" },
            { name: "Missouri", value: "MO" },
            { name: "Montana", value: "MT" },
            { name: "Nebraska", value: "NE" },
            { name: "Nevada", value: "NV" },
            { name: "New Hampshire", value: "NH" },
            { name: "New Jersey", value: "NJ" },
            { name: "New Mexico", value: "NM" },
            { name: "New York", value: "NY" },
            { name: "North Carolina", value: "NC" },
            { name: "North Dakota", value: "ND" },
            { name: "Ohio", value: "OH" },
            { name: "Oklahoma", value: "OK" },
            { name: "Oregon", value: "OR" },
            { name: "Pennsylvania", value: "PA" },
            { name: "Rhode Island", value: "RI" },
            { name: "South Carolina", value: "SC" },
            { name: "South Dakota", value: "SD" },
            { name: "Tennessee", value: "TN" },
            { name: "Texas", value: "TX" },
            { name: "Utah", value: "UT" },
            { name: "Vermont", value: "VT" },
            { name: "Virginia", value: "VA" },
            { name: "Washington", value: "WA" },
            { name: "West Virginia", value: "WV" },
            { name: "Wisconsin", value: "WI" },
            { name: "Wyoming", value: "WY" }];
        };
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、ComboBox の「クイックスタート」を参照してください。
    • <wij-wijcombobox> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • dataSource オプション（data-source ディレクティブ）の設定により、コントローラーから状態を指定します。
      • コントローラーの val 値を指定する selectedValue オプション（selected-value ディレクティブ）を設定し、コンボボックスに最初に表示される値を「Pennsylvania」に設定します。
      • dropDownHeight（drop-down-height）およびdropDownWidth（drop-down-width）オプションを設定します。
    • マークアップ内で要素をネストして、data、label、および value オプションを設定します。
      • data ディレクティブ内に、label および value オプションをネストします。
      • データラベルを、コントローラーで指定された個々の状態の「name」にバインドします。
      • データ値を、コントローラーで指定された個々の状態の「value」にバインドします。
    マークアップ
    コードのコピー 
    <p><label id="output">Where do you live?</label></p>
<wij-combobox data-source="states" drop-down-height="150" drop-down-width="200" selected-value="val">
    <data>
        <label bind="name"></label>
        <value bind="value"></value>
    </data>
 </wij-combobox>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

クイックスタート
AngularJS クイックスタート

参照

wijcombobox メソッド
dataSource フィールド
dropdownHeight フィールド
dropdownWidth フィールド
selectedValue フィールド
data フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.