input[radio]

HTMLのradioボタンです。

使用方法

<input type="radio"
       ng-model="{string}"
       value="{string}"
       [name="{string}"]
       [ng-change="{string}"]>

引数

引数 説明
ngModel

型:string

データ紐付けのための、Angular式を割り当てます。

value

型:string

選択された際に設定される値を式で指定します。

name(optional)

型:string

スコープに公開された入力要素の、フォーム配下でのプロパティ名です。

ngChange(optional)

型:string

ユーザーの操作によってinput要素の入力内容が変更された際に、ここで指定したAngular式が実行されます。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      <input type="radio" ng-model="color" value="red">  Red <br/>
      <input type="radio" ng-model="color" value="green"> Green <br/>
      <input type="radio" ng-model="color" value="blue"> Blue <br/>
      <tt>color = {{color}}</tt><br/>
     </form>
  </body>
</html>
function Ctrl($scope) {
  $scope.color = 'blue';
}
it('should change state', function() {
  expect(binding('color')).toEqual('blue');

  input('color').select('red');
  expect(binding('color')).toEqual('red');
});
<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.color = 'blue';
}
</script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      <input type="radio" ng-model="color" value="red">  Red <br/>
      <input type="radio" ng-model="color" value="green"> Green <br/>
      <input type="radio" ng-model="color" value="blue"> Blue <br/>
      <tt>color = {{color}}</tt><br/>
     </form>
  </body>
</html>

 Back to top

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

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

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