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

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijcheckbox を 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 パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.showHotel = false;
        $scope.showCar = false;
        $scope.showInsurance = false;
        $scope.tripClass = "";
        
        $scope.setTripClass = function (tripClass) {
            $scope.tripClass = tripClass;
        };
        $scope.toggleTripExtra = function (extra) {
            $scope[extra] = !$scope[extra];
        };
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、CheckBox の「クイックスタート」を参照してください。label 要素内にネストした <input /> 要素を使用して、ウィジェットを作成するためのディレクティブとして wij-checkbox 属性を指定し、type 属性を checkbox に設定します。
    マークアップ
    コードのコピー 
    <!-- radio buttons for flight class and checkboxes for extras -->
<table>
    <tr>
        <td><b>Class</b></td>
        <td><b>Extras</b></td>
    </tr>
    <tr>
        <td>
            <label><input type="radio" wij-radio name="class" ng-click="setTripClass('economy')"/> Economy</label>
            <label><input type="radio" wij-radio name="class" ng-click="setTripClass('business')"/> Business</label>
            <label><input type="radio" wij-radio name="class" ng-click="setTripClass('first')"/> First</label>
        </td>
        <td>
            <label><input id1="flag1" type="checkbox" wij-checkbox ng-click="toggleTripExtra('showHotel')"/> Hotel</label>
            <label><input id1="flag2" type="checkbox" wij-checkbox ng-click="toggleTripExtra('showCar')"/> Car</label>
            <label><input id1="flag4" type="checkbox" wij-checkbox ng-click="toggleTripExtra('showInsurance')"/> Insurance</label>
        </td>
    </tr>
</table>
<p>
    <b>Class</b>: <span class="bound">{{tripClass}}</span>
    <br />
    <b>Extras</b>: <span class="bound">
        <span ng-show="showHotel">hotel</span>
        <span ng-show="showCar">car</span>
        <span ng-show="showInsurance">insurance</span>
        <span ng-show="!showHotel && !showCar && !showInsurance">** no extras selected **</span>
    </span></p>
<p>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

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

参照

wijcheckbox メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.