Materiale angolare - Pulsanti radio

Il md-radio-group e md-radio-buttonLe direttive angolari vengono utilizzate per mostrare i pulsanti di opzione nell'applicazione. Il gruppo md-radio è il contenitore di raggruppamento per gli elementi del pulsante di opzione md.

Attributi - md-radio-group

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-radio-group.

Suor n Parametro e descrizione
1

* ng-model

Espressione angolare assegnabile a cui legare i dati.
2

md-no-ink

L'uso dell'attributo indica un flag per disabilitare gli effetti di increspatura dell'inchiostro.

Attributi: md-radio-button

Suor n Parametro e descrizione
1

* ng-model

Espressione angolare assegnabile a cui legare i dati.
2

* ngValue

Espressione angolare che imposta il valore su cui deve essere impostata l'espressione quando selezionata.
3

* value

Il valore su cui deve essere impostata l'espressione quando selezionata.
4

ngChange

Espressione angolare da eseguire quando l'input cambia a causa dell'interazione dell'utente con l'elemento di input.
5

name

Nome della proprietà del modulo in cui viene pubblicato il controllo.
6

aria-label

Aggiunge un'etichetta al pulsante di opzione per l'accessibilità. L'impostazione predefinita è il testo del pulsante di opzione. Se non è disponibile alcun contenuto di testo, verrà registrato un avviso.

Esempio

L'esempio seguente mostra l'uso di md-radio-group e md-radio-button direttive e anche gli usi dei pulsanti di opzione.

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>

Risultato

Verifica il risultato.