 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Formulários HTML e elementos de formulários - AngularJS Forms |
Aprenda a usar radio buttons em suas aplicações AngularJSQuantidade de visualizações: 3047 vezes |
|
Elementos HTML do tipo input type radio (botões de opção) são usados para fornecer opções para o usuário, das quais ele poderá escolher apenas uma. A forma mais comum de fazermos o binding de radio buttons com variáveis nos controllers é fornecer o mesmo valor para as propriedades ng-model de todos os radio buttons envolvidos. Assim, no exemplo abaixo eu mostro como clicar em um botão e obter o valor selecionado em um grupo de três radio buttons. No exemplo também mostro como deixar um dos radio buttons já selecionados. Veja o código completo:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Clientes AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('CadClientes', []);
// vamos criar o controller ClientesController
app.controller('ClientesController', function ($scope, $window){
// vamos guardar o radio button selecionado aqui
$scope.linguagem = "java"; // java já vai ficar selecionado
// $scope.linguagem = ""; // não seleciona nenhum
// função para exibir o radio button selecionado
$scope.obterSelecionado = function(){
$window.alert("O radio button selecionado é: " + $scope.linguagem);
};
});
</script>
<div ng-app="CadClientes" ng-controller="ClientesController">
<form>
Qual sua linguagem favorita?<br>
<input type="radio" ng-model="linguagem" value="java"> Java<br>
<input type="radio" ng-model="linguagem" value="php"> PHP<br>
<input type="radio" ng-model="linguagem" value="python"> Python<br>
<input type="button" ng-click="obterSelecionado()" value="Obter selecionado" />
</form>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
VB.NET - Como usar o laço While em VB.NET |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
