Material Angular - CheckBoxes

o md-checkbox, uma diretiva angular, é usado como um controle de caixa de seleção.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-checkbox.

Sr. Não	Parâmetro e Descrição
1	* ng-model Expressão angular atribuível para vinculação de dados.
2	name O nome da propriedade do formulário sob o qual o controle é publicado.
3	ng-true-value O valor para o qual a expressão deve ser definida quando selecionada.
4	ng-false-value O valor para o qual a expressão deve ser definida quando não selecionada.
5	ng-change Expressão angular a ser executada quando a entrada muda devido à interação do usuário com o elemento de entrada.
6	md-no-ink O uso de atributo indica o uso de efeitos ondulantes de tinta.
7	aria-label Adiciona etiqueta à caixa de seleção para acessibilidade. O padrão é o texto da caixa de seleção. Se nenhum texto padrão for encontrado, um aviso será registrado.

Exemplo

O exemplo a seguir mostra o uso da diretiva md-checkbox e também o uso de caixas de seleção angulares.

am_checkboxes.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>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('checkBoxController', checkBoxController);

         function checkBoxController ($scope) {            
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">  
      <md-checkbox ng-model = "isChecked" aria-label = "Married">
         Married
      </md-checkbox>
      
      <md-checkbox md-no-ink ng-model = "hasInk" aria-label = "No Ink Effects">
         Single
      </md-checkbox>
      
      <md-checkbox ng-disabled = "true" ng-model = "isDisabled" aria-label = "Disabled">
         Don't know (Disabled)
      </md-checkbox>
   </body>
</html>

Resultado

Verifique o resultado.

↰ Previous page