Show data with Angularjs according to an input type="select"

Asked

Viewed 990 times

0

Good afternoon, I’m trying to show you the data of a input text according to a select input.

When selecting an employee in a select, wish to show the position of the official in a input text. Take the example: http://codepen.io/marxros/pen/zZMGjL

html angularjs

3 answers

0

So it works, I believe that is not the 100% correct solution, I do not know if a JSON.parse() there is the best idea, but Oce can already understand better how works the 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


You can the array key and pick up using the employee array in the job field, it would be the solution with 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>

0

What you need to do is use the same ngModel, so much on the input as in the select, thus:

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

Also note that I changed the value of your option, to apply the correct value to ngModel, otherwise, it would assign the entire object as value. Thus, when you select an employee, it will display the position in the text field.

By further simplifying your code, you can remove ngRepeat and use only ngOptions, which is the right one to use in a select. So your code would look like this (I removed the html attributes for easy 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 the following:

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

Browser other questions tagged html angularjs

You are not signed in. Login or sign up in order to post.