角材-ラジオボタン

*md-radio-group* および *md-radio-button* Angularディレクティブは、アプリケーションでラジオボタンを表示するために使用されます。 md-radio-groupは、md-radio-button要素のグループ化コンテナーです。

属性-md-radio-group

次の表に、 md-radio-group のさまざまな属性のパラメーターと説明を示します。

Sr.No

Parameter & Description

1

ng-model*

データバインド先に割り当て可能な角度式。

2

md-no-ink

属性の使用は、インクの波紋効果を無効にするフラグを示します。

属性-md-radio-button

Sr.No	Parameter & Description
1	ng-model* データバインド先に割り当て可能な角度式。
2	ngValue* 選択されたときに式を設定する値を設定する角度式。
3	値 * 選択時に式を設定する値。
4	ngChange* ユーザーが入力要素を操作したために入力が変更されたときに実行される角度式。
5	name コントロールが発行されるフォームのプロパティ名。
6	aria-label アクセシビリティのためにラジオボタンにラベルを追加します。デフォルトはラジオボタンのテキストです。利用可能なテキストコンテンツがない場合、警告がログに記録されます。

例

次の例は、 md-radio-group および md-radio-button ディレクティブの使用と、ラジオボタンの使用を示しています。

*_am_radiobuttons_*

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('radioButtonsController', radioButtonsController);

         function radioButtonsController ($scope) {
            $scope.radioData = [
               { label: 'Apple', value: 'Apple' },
               { label: 'Banana', value: 'Banana' },
               { label: 'Mango', value: 'Mango', isDisabled: true },
               { label: 'Orange', value: 'Orange' }
            ];
            $scope.group = 'Banana';
         }
      </script>
   </head>

   <body ng-app = "firstApplication">
      <div id = "radioButtonsContainer" ng-controller = "radioButtonsController as ctrl"
         layout = "column" ng-cloak>
         <p>Selected Value: <span>{{ group }}</span> </p>

         <md-radio-group ng-model = "group" class = "md-primary">
            <md-radio-button ng-repeat = "d in radioData"
               ng-value = "d.value"
               ng-disabled = " d.isDisabled "
               ng-class = "{'md-align-top-left': $index==1}" >
               {{ d.label }}<br/>
            </md-radio-button>
         </md-radio-group>

      </div>
   </body>
</html>

結果

結果を確認します。

Angular-material-radiobuttons

目次

角材-ラジオボタン

属性-md-radio-group

属性-md-radio-button

例

結果