Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Formulários HTML e elementos de formulários - AngularJS Forms |
Como marcar e/ou testar se uma checkbox está marcada usando AngularJSQuantidade de visualizações: 4265 vezes |
|
Em algumas situações precisamos marcar (via código) uma caixa de seleção (checkbox) e/ou verificar o seu estado em nossas aplicações. Nesta dica eu mostro como isso pode ser feito em AngularJS. Neste exemplo temos um input type checkbox e dois botões. Um permite verificar o estado da checkbox, ou seja, se ela está marcada ou desmarcada, e o outro nos permite marcar a checkbox via código. Veja também que usamos a diretiva ng-model para associar a checkbox com a variável "marcada" colocada no $scope. Ao fazermos isso, qualquer mudança no estado da checkbox automaticamente refletirá na variável no $scope e vice-versa. 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){
// a checkbox vai aparecer desmarcada inicialmente
$scope.marcada = false;
// função para verificar se a checkbox foi marcada
$scope.obterCheckBox = function(){
$window.alert("CheckBox marcada: " + $scope.marcada);
};
// função para marcar a checkbox
$scope.marcarCheckBox = function(){
$scope.marcada = true;
};
});
</script>
<div ng-app="CadClientes" ng-controller="ClientesController">
<form>
<input type="checkbox" name="enviar" id="enviar"
ng-model="marcada"> Enviar Produto<br/>
<input type="button" ng-click="obterCheckBox()"
value="Obter estado da CheckBox" />
<input type="button" ng-click="marcarCheckBox()" value="Marcar CheckBox" />
</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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
