0

Boa tarde, estou tentando mostrar os dados de um input text de acordo com um input select.

Ao selecionar um funcionário em um select, desejo mostrar o cargo do funcionário em um input text. Veja o exemplo: http://codepen.io/marxros/pen/zZMGjL

3 Respostas 3

0

Você pode a chave do array e pegar usando o array de funcionários no campo de cargo, seria a solução com menor alteração de código

var app = angular.module('app',[]);

app.controller('fichasclinicasController', function($scope){
	$scope.funcionarios = 
    [
      {
      codigo: "2",
      mat: "11",
      situacao: "A",
      admissao: "2017-01-01",
      nome: "CICRANO DA SILVA",
      cargo: "CARGOTESTE",
      setor: "SETOR DE TESTES",
      codempresa: "30",
      empresa: "TESTE EMPRESA FINAL",
      idade: "30",
      fatorrh: "O+"
      }
    ]  
	});
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
  <div class="row" ng-controller="fichasclinicasController" ng-init="getFuncionarios()">
    <div class="form-group col-md-6">
      <label for="funcionario">Funcionario:</label>
      <select name="funcionario" id="funcionario" class="form-control" ng-model="funcionarioSelecionado" required>
        <option ng-repeat="(key ,funcionario) in funcionarios" ng-value="key">{{ funcionario.nome }}</option>
      </select>
    </div>
		<div class="form-group col-md-6">
      <label for="cargo">Cargo:</label>
      <input type="text" class="form-control" ng-value="funcionarios[funcionarioSelecionado].cargo"/>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>

0

Assim funciona, acredito que nao seja a solucao 100% correta, nao sei se um JSON.parse() ali é a melhor ideia, mas voce ja consegue entender melhor como funciona o angularjs.

var app = angular.module('app',[]);

app.controller('fichasclinicasController', function($scope){
	$scope.funcionarioSelecionado = {};
  $scope.funcionarioTemp = {};
  
  $scope.funcionarios = 
    [
      {
      codigo: "2",
      mat: "11",
      situacao: "A",
      admissao: "2017-01-01",
      nome: "CICRANO DA SILVA",
      cargo: "CARGOTESTE",
      setor: "SETOR DE TESTES",
      codempresa: "30",
      empresa: "TESTE EMPRESA FINAL",
      idade: "30",
      fatorrh: "O+"
      }
    ]
  
    $scope.handle = function(){
      $scope.funcionarioSelecionado = JSON.parse($scope.funcionarioTemp);
    }
	});
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
  <div class="row" ng-controller="fichasclinicasController" ng-init="getFuncionarios()">
    <div class="form-group col-md-6">
      <label for="funcionario">Funcionario:</label>
      <select name="funcionario" id="funcionario" class="form-control" ng-model="funcionarioTemp" ng-change="handle()" required>
        <option ng-repeat="funcionario in funcionarios" value="{{funcionario}}">{{ funcionario.nome }}</option>
      </select>
    </div>
		<div class="form-group col-md-6">
      <label for="cargo">Cargo:</label>
      <input type="text" class="form-control" ng-model="funcionarioSelecionado.cargo"/>
    </div>
  </div>
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>

0
0

O que você precisa fazer é utilizar o mesmo ngModel, tanto no input como no select, deste modo:

<select name="funcionario" id="funcionario" class="form-control" ng-model="funcionarioSelecionado" required>
    <option ng-repeat="funcionario in funcionarios" value="{{ funcionario.cargo }}">{{ funcionario.nome }}</option>
</select>

<input type="text" class="form-control" ng-model="funcionarioSelecionado" />

Note também que mudei o value do seu option, para que ele aplique o valor correto ao ngModel, caso contrário, ele iria atribuir todo o objeto como valor. Assim, quando você selecionar um funcionário, ele irá exibir o cargo no campo de texto.


Simplificando ainda mais seu código, você pode remover o ngRepeat e utilizar apenas o ngOptions, que é o mais correto para se usar em um select. Assim seu código ficaria deste modo (removi os atributos html para facilitar a leitura):

<select ng-options="funcionario.cargo as funcionario.nome for funcionario in funcionarios" ng-model="funcionarioSelecionado"></select>

<input type="text" ng-model="funcionarioSelecionado" />

Explicando o uso do ngOptions, seria o seguinte:

ng-options="'valor' as 'texto exibido no campo' for 'objeto' in 'array'"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .