「AngularJS」ngDisabledディレクティブでボタンを有効、無効を切り替える
環境
Angularjs 1.6.9
書式
1.<div ng-app="" ng-init="変数名=false">
ngInitディレクティブは、ブートストラップ中にテンプレートが実行される前に実行したい初期化タスクを指定します。
2.<button ng-disabled="変数名">
ngDisabled:式がtrueであれば、要素に属性"disabled"が設定されます。
3.<input type="checkbox" ng-model="変数名"/>
ngModelは、Angularに相互のデータバインディングを行うように伝えるディレクティブです。
使用例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="updateSwitch=false">
<p>
<button ng-disabled="updateSwitch">更新</button>
</p>
<p>
<input type="checkbox" ng-model="updateSwitch"/>無効
</p>
<p>
変数の値：{{ updateSwitch }}
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="updateSwitch=false">
<p>
<button ng-disabled="updateSwitch">更新</button>
</p>
<p>
<input type="checkbox" ng-model="updateSwitch"/>無効
</p>
<p>
変数の値：{{ updateSwitch }}
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="updateSwitch=false">
<p>
<button ng-disabled="updateSwitch">更新</button>
</p>
<p>
<input type="checkbox" ng-model="updateSwitch"/>無効
</p>
<p>
変数の値：{{ updateSwitch }}
</p>
</div>
</body>
</html>
結果
「無効」チェックボックスを入れて、「更新」ボタンが無効にします。「変数の値：true」が表示されます。