ngReadonly

http://docs.angularjs.org/api/ng.directive:ngReadonly

概要
使用方法
デモ

概要

HTMLの仕様では、readonlyのような特別な属性をブラウザに保持することを必要としていません。 (存在すればtrueとし、しなければfalseという事を意味します。) これは、紐付けられた式を正しく取得するAngularコンパイルの妨げになります。この問題を解決するために、ngReadonlyディレクティブが存在します。

使用方法

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

引数

引数説明

ngReadonly

引数	説明
ngReadonly	型：`式` 式がtrueであれば、特別な属性"readonly"が要素に設定されます。

型：式

式がtrueであれば、特別な属性"readonly"が要素に設定されます。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
  </body>
</html>

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

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
  </body>
</html>

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

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