Jump to content
marcelobbt

Carregar uma caixa de escolha com AngularJS e valor selected definido

Recommended Posts

Eu estou montando um form para editar alguns dados, então uso o PHP/Codeigniter para montar a página com as informações. Acontece que existem umas caixas de escolha que possuem um código em AngularJS para executar uma fórmula e quando coloco o "ng-model", simplesmente some o item que deveria estar marcado.

 

Segue parte do form abaixo:

<div class="form-group">
	<label>Trajetória:</label>
	<?php echo form_input(array('type'=>"text", 'class'=>"form-control", 'name'=>'trajetoriaform','id'=>'trajetoriaform'),$riscoBD->__get('trajetoria')); ?>
</div>
<div class="form-group">
	<label>Frequência:</label>
	<?php echo form_dropdown(array('class'=>"form-control", "ng-model"=>"frequencia", "ng-change"=>"calcRisco()", 'name'=>'frequenciaform','id'=>'frequenciaform'), $frequencia, $riscoBD->__get('frequencia')); ?>
</div>
<div class="form-group">
	<label>Probabilidade:</label>
	<?php echo form_dropdown(array('class'=>"form-control", "ng-model"=>"probabilidade", "ng-change"=>"calcRisco()", 'name'=>'probabilidadeform','id'=>'probabilidadeform'), $probabilidade, set_value('probabilidadeform')); ?>
</div>
<div class="form-group">
			<label>Severidade:</label>
			<?php echo form_dropdown(array('class'=>"form-control", "ng-model"=>"severidade", "ng-change"=>"calcRisco()", 'name'=>'severidadeform','id'=>'severidadeform'), $severidade, set_value('severidadeform')); ?>
</div>
<div class="form-group">
	<label>Risco:</label>
	<?php echo form_input(array('type'=>"text", "ng-value"=>"resultadorisco", 'class'=>"form-control", 'name'=>'riscoform','id'=>'riscoform', "ng-model"=>"risco"),set_value('riscoform')); ?>
</div>

 

Quando gera o html, ao colocar para inspecionar o código de uma das caixas o código fica assim:

<div class="form-group">
	<label>Frequência:</label>
	<select class="form-control" ng-model="frequencia" ng-change="calcRisco()" name="frequenciaform" id="frequenciaform">
		<option value="? undefined:undefined ?"></option>
		<option value="1" selected="selected">Rara</option>
		<option value="2">Eventual</option>
		<option value="3">Habitual</option>
		<option value="4">Permanente</option>
	</select>
</div>

Essa linha "4" aparece do angularJS e é o que impede que apareça o valor selected.

 

Queria saber se tem algum geito de fazer o javascript mostrar o valor que vem do PHP.

 

Abaixo o script:

var app = angular.module('risco', []);
app.controller('CalculaRisco', function($scope) {
	$scope.frequencia;
	$scope.probabilidade;
	$scope.severidade;
	$scope.calcRisco = function () {		
		var freq = parseInt ($scope.frequencia);
		var prob = parseInt ($scope.probabilidade);
		var sev = parseInt ($scope.severidade); //console.log(sev+' '+prob+' '+freq);
		risco =  freq + prob + sev;
		if (risco <= 4) {
			$scope.risco = 'Baixo';
		} else if (risco <= 7) {
			$scope.risco = 'M\u00e9dio';
		} else if (risco <= 10) {
			$scope.risco = 'Alto';
		} else {
			$scope.risco = 'Muito Alto';
		}
		//console.log(risco+$scope.severidade);
	};	
});

 

Share this post


Link to post
Share on other sites

O PHP é pq o sistema todo está em PHP. E como o framework me facilita a montar o form eu acabo usando ele, mas poderia montar o form em html simples.

 

Na verdade o javascript que estou usando apenas para executar uma ação ao escolher opções no form. Isso funcionou muito bem no form para criar as informações. Mas quando fui criar o form para editar não consigo jogar os valores nos campos select por causa do AngularJS. Se tivesse uma forma de lançar esses valores no form eu mudaria. Só não estou sabendo fazer.

Share this post


Link to post
Share on other sites

Se você utiliza o Angular que traz a você os dados, não tem logica e nem o porque você aplicar o php direto no documento.

Lembre-se que o angular é um MVC e por isso o ideal de utilização dado o seu exemplo seria

 

PHP - Faz suas condições e fornece o JSON

HTML - Printa o resultado na tela

Angular - Cria as condições para passar ao PHP, recuperar o json e criar as condições de view no html.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alex Gustavo Canalli de So
      Boa noite pessoal.

      Estou desenvolvendo uma aplicação de controle de finanças com receitas, despesas, transferências entre contas, relatórios e gráficos em angularjs + webapi + ddd + automapper + injeção de dependencias para estudo de novas tecnologias, pois trabalho atualmente com WebForms.

      Criei todas as (Domais, Applications, Services, Repository, etc).

      A minha grande dúvida é a seguinte:
      Nas telas de cadastro eu basicamente retorno o objeto inteiro no controller de cada entidade (domain), Mas na tela de gráfico por tipo de despesa por exemplo, não consigo fazer dessa forma, pois preciso retornar o valor total de despesas cadastradas para cada tipo em determinado período.
      No WebForms eu criaria uma classe personalizada com os campos necessários e faria um select new { } direto no link setando o valor de cada campo, porém, no ddd me vejo obrigado a instanciar os campos fixos do domain.
      Existe alguma forma de criar uma view personalizada para o retorno de uma consulta?
    • By StraightFree
      Senhores, bom dia!
       
      Preciso da ajuda de vocês para tentar solucionar esse problema.
       
      Sou programador Delphi e precisei fazer o acesso aos dados gerados pelo sistema desktop pela web. 
       
      Optei por utilizar o DataSnap para criar o WebService, por já ter mais familiaridade com a ferramenta.
       
      Assim, comecei a fazer os testes para acessar o WebService através de um cliente HTML + AngularJS. Criei no DataSnap 4 webservice:
      function Produto : TJSONArray; function updateProduto(AValue: TJSONObject) : TJSONObject; function acceptProduto(AValue: TJSONObject) : TJSONObject; function cancelProduto(AKey: String) : TJSONObject; O DataSnap faz o mapeamento automático para cada uma das funções de acordo com o método HTTP chamado na requisição, conforme abaixo:
      Cliente Requisição DataSnap Chama a function GET Produto POST updateProduto PUT acceptProduto DELETE cancelProduto Se eu chamar os métodos através de um cliente Delphi chamado RestDebbuger (acompanha o delphi) ou um software de teste de webservice chamado SoapUI consigo acessar todas as funções do webservice sem nenhum problema.
       
      Criei um cliente para consumir esses webservices em HTML e JavaScript/AngularJS, nesse cliente consigo consumir sem problemas os métodos GET e POST. No entanto, quando tento acessar o método PUT ou DELETE sempre me retorna um erro 500 no servidor. Fiz o debbug da aplicação Delphi após fazer a chamada pelo cliente AngularJS e percebi que não está chegando o método ao servidor e por isso ele dá um erro na requisição. 
      Chamando esse método pelo RestDebbuger e pelo SoapUI funciona normalmente.
       
      Alguém saberia me dizer por qual motivo não consigo acessar esse método pelo angularJS?
       
      Qualquer ajuda será muito bem vinda.
       
      Obrigado!
       
    • By vpontessilva
      Olá senhores, estou criando uma aplicação simples em AngularJS, a aplicação se resume em 3 páginas:
      1 - Aparelho: Onde a pessoa escolhe o aparelho
      2 - Planos: Escolhe o plano relacionado ao aparelho
      3 - Cadastro final informando nome, e-mail, telefone e etc...
       
      A lista de aparelhos e e de planos possiveis praquele aparelho escolhido vem de um arquivo JSON, que eu pego através de uma requisição HTTP
      A dúvida é: Eu gostaria de ir salvando essas informações, quando ele clicar em um aparelho, salvasse, depois o plano e salvasse e depois de escrever os dados
      salvasse tudo e saisse na página final e um console.log, mas como faço isso? Tô perdido.. 

      Esse é o meu arquivo api.js, onde faço a requisição dos aparelhos:
      // plataformas //arquivo api.js app.controller('plataformAPI', function($scope, $http){ $http.get('http://private-59658d-celulardireto2017.apiary-mock.com/plataformas') .then(function(response){ $scope.dados = response.data.plataformas; }); }); Esse é o arquivo home.html, onde a pessoa escolhe os aparelhos:
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center" ng-controller="plataformAPI"> <div ng-repeat="x in dados"> <h1>{{x.nome}}</h1> <p>{{x.descricao.replace('|',' ')}}</p> <p><a class="btn btn-primary btn-md" href="{{prefix + x.nome}}" role="button">Quero esse</a></p> </div> </div> Eu gostaria de salvar o nome do aparelho que ele clicou.. 
    • By marcelobbt
      Estou montando um form que acrescenta alguns campos mais esses campos que são acrescentados não consigo fazer funcionar a validação.
       
      Obs: Se eu colocar o campo no html as regras de validação funcionam, mas se eu acrescento via botão ele não funciona.
       
      html:
      <div class="row" ng-app="acidente"> <div class="col-sm-12"> <h2>Cadastrar Acidente</h2> <p>Empresa: <?php echo '<strong>'.$mensal->__get('empresa').'</strong>&nbsp;&nbsp;-&nbsp;&nbsp;Período:'.$mensal->__get('mes').'/'.$mensal->__get('ano'); ?></p> <form class="form-horizontal" name="acidenteForm" novalidate action="http://www.google.com"> <div class="form-group"> <label class="col-sm-2 control-label">Dia do Acidente<span class="vermelho">*</span>:</label> <div class="col-sm-10"> <input type="number" name="diaform" class="form-control" ng-model="diaform" required dia-Acidente> &nbsp;&nbsp;<span class="vermelho" ng-show="acidenteForm.diaform.$invalid && acidenteForm.diaform.$dirty">O dia do acidente deve ser um número válido.</span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Descrição do Acidente<span class="vermelho">*</span>:</label> <div class="col-sm-10"> <textarea name="descricaoform" class="form-control" required ng-model="descricaoform" rows="5"></textarea> <p class="vermelho" ng-show="acidenteForm.descricaoform.$invalid && acidenteForm.descricaoform.$dirty">Favor preencher a descrição do acidente.</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Recomendações do Acidente:</label> <div class="col-sm-10"> <textarea name="recomendacaoform" class="form-control" rows="5"></textarea> </div> </div> <span ng-controller="AdicionarController"> <div class="form-group"> <label class="col-sm-2 control-label">Adicionar acidentado:</label> <div class="col-sm-10"> <input type="button" class="btn btn-success" ng-click="AdicionarCampos()" name="adicionarAcidentado" value="+"> </div> </div> <div id="maisCampos"> </div> </span> <p><span class="vermelho">*</span> campos de preenchimento obrigatório</p> <div class="form-group"> <label class="col-sm-2 control-label">&nbsp;</label> <div class="col-sm-10"> <input type="submit" class="btn btn-success" name="cadastrar" ng-disabled="acidenteForm.$invalid" value="Enviar"> </div> </div> </form> </div> <script src="<?php echo base_url(); ?>js/angular.min.js"></script> <script src="<?php echo base_url(); ?>js/acidente.js"></script> </div>  
      acidente.js
      var app = angular.module('acidente', []); app.directive('diaAcidente', function() { return { require: 'ngModel', link: function(scope, element, attr, mCtrl) { function myValidation(value) { if (value > 0 && value < 32) { mCtrl.$setValidity('charE', true); } else { mCtrl.$setValidity('charE', false); } return value; } mCtrl.$parsers.push(myValidation); } }; }); var adicionar = []; var i = 0; app.controller('AdicionarController', function($scope) { $scope.AdicionarCampos = function () { ordinal = i+1; adicionar.push('<p><strong>'+ordinal+'º acidentado</strong></p>'); adicionar.push('<div class="form-group"><label class="col-sm-2 control-label">Matrícula:</label><div class="col-sm-10"><input type="number" name="matriculaform'+i+'" class="form-control"></div></div>'); adicionar.push('<div class="form-group"><label class="col-sm-2 control-label">Previsão de Alta<span class="vermelho">*</span>:</label><div class="col-sm-10"><input type="date" name="previsaoform'+i+'" id="previsaoform'+i+'" class="form-control" required ng-model="previsaoform'+i+'">&nbsp;&nbsp;<span class="vermelho" ng-show="acidenteForm.previsaoform'+i+'.$invalid && acidenteForm.previsaoform'+i+'.$dirty">Favor informar a previsao da alta.</span></div></div>'); document.getElementById("maisCampos").innerHTML = adicionar; i = i + 1; }; });  
       
    • By marcelobbt
      Estou tentando fazer uma aplicação em angularjs mas quando adiciono o controller da sempre esse erro:
       
      Uncaught Error: [$injector:modulerr] 
       
      Abaixo minha aplicação:
      HTML
      <div class="row" ng-app="acidenteApp"> <div class="col-sm-12" ng-controller="AcidenteController"> <p> teste de funcionamento {{1+1}}</p> <h2>Cadastrar Acidente</h2> <p><?php echo '<strong>'.$mensal->__get('empresa').'</strong> - '.$mensal->__get('mes').'/'.$mensal->__get('ano'); ?></p> <?php echo form_open('../CadastrarAcidente/'.$mensal->__get('idMensal'), array('class'=>"form-horizontal", 'name'=>'formAcidente', 'id'=>'formAcidente')); ?> <div class="form-group"> <label class="col-sm-2 control-label">Dia do Acidente:</label> <div class="col-sm-10"> <?php echo form_input(array('type'=>"number", 'class'=>"form-control", 'name'=>'diaform','id'=>'diaform'), set_value('diaform')); ?> <p class="help-block">O dia é obrigatório</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Descrição do Acidente:</label> <div class="col-sm-10"> <?php echo form_textarea(array('class'=>"form-control", 'name'=>'descricaoform','id'=>'descricaoform'), set_value('descricaoform')); ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Recomendações/Ações Após o Acidente:</label> <div class="col-sm-10"> <?php echo form_textarea(array('class'=>"form-control", 'name'=>'recomendacaoform','id'=>'recomendacaoform'), set_value('recomendacaoform')); ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Adicionar acidentado:</label> <div class="col-sm-10"> <?php echo form_button(array('name'=>'adicionarAcidentado','id'=>'adicionarAcidentado'), "+"); ?> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <?php echo form_button(array('name'=>'cadastrar', 'ng-disabled'=>'formAcidente.$invalid'),"Cadastrar"); ?> </div> </div> <p><?php echo $erro; ?></p> </div> <script src="<?php echo base_url(); ?>js/angular.min.js"></script> <script src="<?php echo base_url(); ?>js/acidente.js"></script> </div> Abaixo o arquivo javascript acidente.js
       
      // criar angular app var acidenteApp = angular.module('acidenteApp', []); acidenteApp.controller('AcidenteController', function AcidenteController($scope) { console.log('teste'); });  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.