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
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
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>
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>
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'"