 |
|
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: 3955 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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: |
AngularJS ::: Angular / AngularJS + JavaScript ::: AngularJS Services (Serviços AngularJS) |
Aprenda a ler dados de um servidor remoto usando o serviço $http do AngularJSQuantidade de visualizações: 1456 vezes |
|
O serviço $http do AngularJS pode ser usado quando precisamos ler informações vindas de um servidor remoto. Esta comunicação é feita por meio do objeto XMLHttpRequest ou via JSONP. A funcionalidade deste serviço é semelhante às requisições AJAX do jQuery. Vamos ver um exemplo no qual enviamos dois números para uma página PHP e ela nos retorna a soma destes números como uma resposta JSON. Primeiro veja o código PHP que gera o JSON: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header('Content-type: application/json');
$numero1 = $_GET["numero1"];
$numero2 = $_GET["numero2"];
$soma = $numero1 + $numero2;
// vamos gerar o JSON com a soma
$res = json_encode(array("soma" => $soma));
// vamos retornar o JSON para a página que chamou esta
echo $res;
?>
Salve este código como somar.php e experimente chamá-la no seu navegador fornecendo os dois valores a serem somados. Veja: http://localhost/somar.php?numero1=37&numero2=3 Se tudo correr bem, o seguinte resultado será exibido: {"soma":40} Aqui eu usei PHP no servidor remoto, mas você pode usar Java, Perl, Node.js, ASP.NET, etc, desde que o retorno seja JSON. Agora vamos à aplicação AngularJS. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos 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('MinhaApp', []);
// vamos criar o controller HttpTesteController
app.controller('HttpTesteController', function($scope, $http){
// vamos fazer a conexão remota
$http.get("http://localhost/somar.php?numero1=37&numero2=3")
.then(function(response){
$scope.resultado = response.data.soma;
}
);
});
</script>
<div ng-app="MinhaApp" ng-controller="HttpTesteController">
<h1>A soma dos valores é: {{resultado}}</h1>
</div>
</body>
</html>
Abra esta página no seu navegador web. Você deverá ver um resultado parecido com: A soma dos valores é: 40 Note que usamos o método get() do serviço $http para fazer uma requisição GET para a página PHP. Em dicas dessa seção mostro como fazer requisições POST e também tratar os possíveis erros que podem ocorrer nesta operação. |
AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
Como adicionar funções (ou métodos) ao seu controller AngularJSQuantidade de visualizações: 1895 vezes |
|
Nesta dica mostrarei como adicionar comportamento ao seu controller AngularJS, ou seja, adicionar funções ou métodos para acessar e/ou modificar as variáveis contidas no escopo. Para este exemplo criaremos um controller chamado "VolumeTV". Este controller terá uma variável chamada "volume" e dois botões para aumentar ou diminuir o volume. Note que, tanto a variável quanto as duas funções são colocadas no $scope para facilitar o acesso destes a partir da view. Veja o exemplo completo, sem usar AngularJS CLI nem TypeScript, somente JavaScript e HTML: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos 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('MinhaApp', []);
// vamos criar o controller VolumeTV
app.controller('VolumeTV', function ($scope){
// define o volume inicial
$scope.volume = 5;
// função para aumentar o volume
$scope.aumentarVolume = function(){
$scope.volume++;
};
// função para diminuir o volume
$scope.diminuirVolume = function(){
$scope.volume--;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="VolumeTV">
<h1>Volume atual: {{volume}}</h1>
<button ng-click="aumentarVolume()">Aumentar Volume</button>
<button ng-click="diminuirVolume()">Diminuir Volume</button>
</div>
</body>
</html>
|
AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Tutorial AngularJS - Como usar a diretiva ng-init do AngularJSQuantidade de visualizações: 2181 vezes |
A diretiva ng-init do AngularJS é usada quando queremos criar uma varíável no escopo atual e inicializá-la com algum valor. Veja um exemplo de seu uso:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<div ng-app="" ng-init="codigo=350">
<h1>O próximo código é: {{codigo + 1}}</h1>
</div>
Quando você executar este exemplo, verá escrita a saída: O próximo código é: 351 Isso aconteceu porque usamos a diretiva ng-init para criar uma variável chamada "codigo" e definimos o seu valor inicial como 350. Então, dentro do elemento <h1>, nós acessamos a variável e aumentamos o seu valor em 1 antes de exibí-la. É importante observar que esta diretiva só é usada em situações nas quais queremos apenas fazer protótipos, exemplos ou testar alguma funcionalidade. Na prática, variáveis do escopo são inicializadas usando-se Components ou Controllers. Um outro uso da diretiva ng-init é para declarar e inicializar variáveis dentro do escopo de um ng-repeat. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
// vamos criar uma nova aplicação AngularJS
var app = angular.module('MinhaApp', []);
// vamos criar um novo controller
app.controller('MeuController', function($scope){
$scope.Livros = [
{titulo: "Java para a web", autor: "Osmar J. Silva"},
{titulo: "Aprenda AngularJS", autor: "José de Angelis"}
];
});
</script>
<div ng-app="MinhaApp" ng-controller="MeuController">
<div ng-repeat="livro in Livros" ng-init="ordem = ($index + 1)">
<h1>Ordem: {{ordem}} - Título: {{livro.titulo}} - Autor: {{livro.autor}}</h1>
</div>
</div>
Quando você abrir esta página, verá a seguinte saída: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- Ordem: 1 - Título: Java para a web - Autor: Osmar J. Silva Ordem: 2 - Título: Aprenda AngularJS - Autor: José de Angelis |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Postura ética profissional Os engenheiros são profissionais responsáveis por criar soluções para situações do dia a dia que, de certa forma, pareciam impossíveis. Eles otimizaram as formas de transporte, de construção e, principalmente, de produção das indústrias. Diante dessas inovações, é comum que esses profissionais enfrentem situações éticas em que precisem decidir se avançam ou não com tais projetos. Quanto ao conceito de ética na engenharia, é correto afirmar que: A) A ética na engenharia é um aspecto que deve ser considerado em segundo lugar ante os benefícios que pode trazer à humanidade. B) A ética engloba a avaliação racional de ganhos e riscos, definindo as responsabilidades individuais durante a execução de um projeto. C) A ética engloba a avaliação social dos riscos e das responsabilidades coletivas durante a execução de um projeto. D) A ética é um conceito que não se aplica à engenharia, somente à medicina, por esta área tratar diretamente da vida de um indivíduo. E) A ética somente diz respeito à engenharia, pois as descobertas realizadas por tal área englobam um grande número de pessoas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de águas pluviais Um professor de engenharia que gostava de fazer os alunos pensarem ativamente e questionarem a base das tabelas e ábacos fez uma pergunta em classe a partir dos ábacos da NBR 10844 de instalações prediais de águas pluviais: por que os ábacos com saída do tipo aresta viva fornecem maiores diâmetros que as do tipo funil? Cinco principais explicações foram fornecidas pelas classes, mas apenas uma estava correta. Marque a opção que explica corretamente o fenômeno. A) As saídas do tipo aresta viva fornecem maior capacidade de escoamento por permitir maior lâmina de água imediatamente sobre a entrada. B) As saídas do tipo funil geram aumento da perda de carga, ocasionando uma redução da capacidade hidráulica, que é, então, expressa no ábaco. C) As saídas em aresta viva geram uma incorporação de ar indesejada ao escoamento, ocasionando um efeito de sucção que reduz a capacidade hidráulica. D) As saídas do tipo funil necessitam de maior altura até chegar ao diâmetro da tubulação e isso é compensado em relação ao parâmetro L do ábaco. E) As saídas em arestas vivas têm menor perda de carga, o que implica a incorporação de ar com consequente redução da capacidade hidráulica. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Turbinas hidráulicas Turbinas hidráulicas têm como principal aplicação a geração de energia, transformando energia cinética da água em energia mecânica, que será posteriormente convertida em energia elétrica. Sobre as turbinas hidráulicas, marque a alternativa correta: A) Uma turbina do tipo Francis apresenta uma baixa eficiência e pode ser operada apenas em baixas vazões. B) Uma turbina do tipo Francis tem eficiência relativamente baixa, porém tem ampla faixa de operação. C) A turbina do tipo Pelton tem um conjunto de pás fixas que podem ajustar o ângulo de entrada da água. D) A turbina do tipo Kaplan foi adaptada a partir da turbina de hélice e pode ser operada em grandes vazões. E) Uma turbina do tipo Pelton tem suas pás em formato de conchas e são operadas em grandes vazões. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Responsabilidade civil dos prepostos e preponentes Com relação as definições do preposto, assinale a alternativa correta. A) O preposto pode negociar por conta própria ou de terceiro, e participar indiretamente de operação idêntica a que lhe foi cometida. B) O preposto não pode, sem autorização escrita, fazer-se substituir no desempenho da preposição, sob pena de responder pessoalmente pelos atos do substituto e pelas obrigações por ele contraídas. C) Considera-se inválida a entrega de papéis, bens ou valores ao preposto, encarregado pelo preponente, se este os recebeu sem protesto. D) As limitações contidas na outorga de poderes podem ser opostas a terceiros, dependem do arquivamento e averbação do instrumento no Registro Público de Empresas Mercantis. E) No exercício de suas funções, os prepostos são pessoalmente responsáveis, perante terceiros, pelos atos culposos e atos dolosos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Analise o seguinte código JavaScriptvar palavra = 'b' + 'a' + + 'a' + 'a'; palavra = palavra.toLowerCase(); document.write(palavra); Qual é o resultado de sua execução? A) baaa. B) banana. C) anana. D) bananas. E) Um erro de execução. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
JavaScript - Como testar se uma string termina com uma determinada substring em JavaScript usando a função endsWith() Python - Como exibir os valores de 0 a 10 em ordem decrescente usando o laço for da linguagem Python |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
