3

Preciso percorrer um elemento select em uma página HTML colocando os elementos option dentro dele. Já consigo fazer isso, o problema é que no atributo value desses option deveriam receber os identificadores vindos a partir do banco de dados, mas está aparecendo outros números diferentes do valor dos registros e quando o formulário é enviado ocorre erro de persistência no Java pois o identificador não existe para fazer a relação de chave estrangeira.

HTML:

<div class="input-group">
    <select name="objeto.oid" id="objetoSelect"
        ng-init="carregarObjeto()" ng-model="objeto"
        class="form-control"
        placeholder="<spring:message code="label.objeto" />"
        aria-describedby="basic-addon1"
        ng-options="objeto.oid as objeto.descricao for objeto in list.objetos">
    </select>
    <span class="input-group-addon" id="basic-addon1">
        <span class="glyphicon glyphicon-pencil"></span>
    </span>
</div>

JavaScript:

$scope.carregarObjetos = function() {
    $http({
        method : "GET",
        url : '<c:url value="/cadastros/objeto/getObjetos" />'
    }).then(function mySuccess(response) {
        var length = response.data.length;
        var data = response.data;
        for (var i = 0; i < length; i++) {
            $scope.list.objetos.push({
                oid : data[i].oid,
                descricao : data[i].descricao.toString(),
                label : data[i].modelo.label.toString()
            });
        }
    }), function myError(response) {
        alert("Não foi possível carregar lista de objetos");
    }
}

Resultado:

Invés de mostrar os números 3 e 5 nos dois options que vem da tabela do banco de dados, está mostrando dessa maneira:

inserir a descrição da imagem aqui

E os dados são recebidos corretamente no AJAX.

EDIT

Aparece um option assim dentro do select ao atualizar com o método carregarObjetos:

<option value="? number:5 ?"></option>
1
  • java ou javascript?
    – Lollipop
    Commented 3/02/2016 às 18:47

1 Resposta 1

2

Não vejo motivos para o seu código não funcionar, parece estar ok. O que pode estar acontecendo é de obter os dados de modo errado. Você já verificou isso?

Ao usar o select você tem 2 opções. A tradicional (como você fez) e também usando o ng-repeat (mostro mais a frente).


Tradicional

O modo como você fez está correto e o resultado não deve sofrer interferência. O motivo pelo qual você vê number:3 é devido a uma mudança que o Angular sofreu ao mudar para a versão 1.4. Isso pode ser removido usando um track by.

<select name="teste01" ng-model="teste1" ng-options="item.id as item.nome for item in vm.lista track by item.id"></select>

ng-repeat

Eu, particularmente, evito usar isso, pois é um "work-around", mas... Em todo caso, você também pode setar as opções usando um ng-repeat, exemplo:

<select name="teste02" ng-model="teste2">
    <option ng-repeat="item in vm.lista" value="{{item.id}}">{{item.nome}}</option>
</select>

Apesar das opções, o modo como você está usando deve ser solucionado ao usar a opção track by. Veja um exemplo que fiz e que funciona corretamente com os 3 modelos: O que você fez, o que utiliza track by e com ng-repeat:

https://plnkr.co/edit/4cpbq3?p=preview

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 .