Good afternoon, I'm trying to show the data of an input text according to an input select .
When selecting an employee in a select , I want to show the employee's job in an input text . See the example: link
Show data with angularjs according to an input type="select"
0
asked by anonymous 29.03.2017 / 21:01
3 answers
0
You can array key and pick up using the array of employees in the field of charge, would be the solution with the least code change
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>
29.03.2017 / 22:32
0
So it works, I believe it's not the 100% correct solution, I do not know if a JSON.parse() is the best idea, but you can better understand how angularjs works.
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>
29.03.2017 / 22:16
0
What you need to do is to use the same ngModel , both in input and select , like this:
<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 also that I've changed the value of your option , so that it applies the correct value to ngModel , otherwise it would assign the entire object as value. So when you select an employee, it will display the job in the text field.
Further simplifying your code, you can remove ngRepeat and only use ngOptions, which is the most correct to use in a select. So your code would look this way (I removed the html attributes for easier reading):
<select ng-options="funcionario.cargo as funcionario.nome for funcionario in funcionarios" ng-model="funcionarioSelecionado"></select>
<input type="text" ng-model="funcionarioSelecionado" />
Explaining the use of ngOptions would be as follows:
ng-options="'valor' as 'texto exibido no campo' for 'objeto' in 'array'"
29.03.2017 / 22:33