Material angular: botones de radio

los md-radio-group y md-radio-buttonLas directivas angulares se utilizan para mostrar botones de opción en la aplicación. El md-radio-group es el contenedor de agrupación de los elementos md-radio-button.

Atributos - md-radio-group

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-radio-group.

No Señor	Descripción de parámetros
1	* ng-model Expresión angular asignable a la que enlazar datos.
2	md-no-ink El uso de un atributo indica una bandera para desactivar los efectos de ondulación de la tinta.

Atributos - md-radio-button

No Señor	Descripción de parámetros
1	* ng-model Expresión angular asignable a la que enlazar datos.
2	* ngValue Expresión angular que establece el valor al que se debe establecer la expresión cuando se selecciona.
3	* value El valor al que se debe establecer la expresión cuando se selecciona.
4	ngChange Expresión angular que se ejecutará cuando la entrada cambie debido a la interacción del usuario con el elemento de entrada.
5	name Nombre de propiedad del formulario bajo el cual se publica el control.
6	aria-label Agrega una etiqueta al botón de radio para accesibilidad. Este valor predeterminado es el texto del botón de opción. Si no hay contenido de texto disponible, se registrará una advertencia.

Ejemplo

El siguiente ejemplo muestra el uso de md-radio-group y md-radio-button directivas y también los usos de botones de opción.

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>

Resultado

Verifique el resultado.

↰ Previous page