js STUDIO

ngDisabled

概要

下記のマークアップは、Chrome/Firefoxではボタンが有効になりますが、IE8以下では有効になりません。 

<div ng-init="scope = { isDisabled: false }">
 <button disabled="{{scope.isDisabled}}">Disabled</button>
</div>

HTMLの仕様では、disabledのような特別な属性の値を保持する事をブラウザに必要としていません。 (提供されればtrueとみなし、そうでなければfalseとみなします) これがAngularコンパイラが紐付いている式を正しく取得する事の妨げになっています。 この問題を解決するために、ngDisabledディレクティブがあります。

使用方法

<INPUT ng-disabled="{expression}">
   ...
</INPUT>

引数

引数 説明
ngDisabled

型：式

もし、式がtrueであれば、要素に属性"disabled"が設定されます。

使用歩法 

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
    <button ng-model="button" ng-disabled="checked">Button</button>
  </body>
</html>

it('should toggle button', function() {
  expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
  input('checked').check();
  expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
    <button ng-model="button" ng-disabled="checked">Button</button>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。