Matériau angulaire - boutons radio

le md-radio-group et md-radio-buttonLes directives angulaires sont utilisées pour afficher les boutons radio dans l'application. Le md-radio-group est le conteneur de regroupement des éléments md-radio-button.

Attributs - md-radio-group

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-radio-group.

Sr. Non Paramètre et description
1

* ng-model

Expression angulaire attribuable à laquelle lier les données.
2

md-no-ink

L'utilisation de l'attribut indique un drapeau pour désactiver les effets d'ondulation de l'encre.

Attributs - md-radio-button

Sr. Non Paramètre et description
1

* ng-model

Expression angulaire attribuable à laquelle lier les données.
2

* ngValue

Expression angulaire qui définit la valeur à laquelle l'expression doit être définie lorsqu'elle est sélectionnée.
3

* value

Valeur à laquelle l'expression doit être définie lorsqu'elle est sélectionnée.
4

ngChange

Expression angulaire à exécuter lorsque l'entrée change en raison de l'interaction de l'utilisateur avec l'élément d'entrée.
5

name

Nom de propriété du formulaire sous lequel le contrôle est publié.
6

aria-label

Ajoute une étiquette au bouton radio pour l'accessibilité. Il s'agit par défaut du texte du bouton radio. Si aucun contenu textuel n'est disponible, un avertissement sera enregistré.

Exemple

L'exemple suivant montre l'utilisation de md-radio-group et md-radio-button directives ainsi que l’utilisation des boutons radio.

am_radiobuttons.htm

<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>

Résultat

Vérifiez le résultat.