AngularJSのビルトインのディレクティブを使って、ある特定の属性を追加して有効、無効を切替える事が出来ます。
デモとコードサンプルはこちら。
input要素のreadonly、チェックボックスのchecked、option要素のselected、button要素のdisabledは、属性名と値のペアで指定せず、属性名を指定するかしないかで有効、無効を切替えています。
他の属性のように値に対してバインディングして値を割り当てて切替える事が出来ません。しかし、下記に示す専用のディレクティブが用意されていてそのディレクティブを使って有効、無効を切替える事が出来ます。
1)ng-disabledでボタンの有効無効を切り替え
下記例では、”checkValue”の値がtrueの場合はその要素に動的に”disabled”属性を追加し、ボタンを無効にします。
<button class=”btn btn-success” ng-disabled=”checkValue”>ボタン</button>
2)ng-checkedでチェックボックスのチェックを切り替え
下記例では、”checkValue”の値がtrueの場合はその要素に動的に”checked”属性を追加し、チェックされた状態になります。
<input type=”checkbox” ng-checked=”checkValue”>最上部チェック有効
3)ng-readonlyで読込専用を切り替え
下記例では、”checkValue”の値がtrueの場合はその要素に動的に”readonly”属性を追加し、読込専用の状態になります。
<input type=”text” ng-readonly=”checkValue” value=”最上部チェックで読込専用”/>
4)ng-selectedで選択、未選択を切り替え
下記例では、”checkValue”の値がtrueの場合はその要素に動的に”selected”属性を追加し、選択された状態になります。
<select>
<option selected>選択肢1</option>
<option>選択肢2</option>
<option ng-selected=”checkValue”>最上部チェックで有効</option>
</select>
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示