Value attribute of options in select are not set correctly

Question

Value attribute of options in select are not set correctly

Navigation

#1 by (2 votes)

3

I need to loop through a select element on a HTML page by putting the option elements inside it. The problem is that in the attribute value of these option should receive the identifiers coming from the database, but it is appearing other numbers different from the value of the records and when the form is sent there is a persistence error no Java because the identifier does not exist to make the foreign key relationship.

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");
    }
}

Result :

Instead of displaying the numbers 3 and 5 in the two options that comes from the database table, it is showing this way:

AndthedataisreceivedcorrectlyinAJAX.

EDIT

AoptionappearswithinselectwhenupdatingwithcarregarObjetosmethod:

<optionvalue="? number:5 ?"></option>

html angularjs ajax html-select html-option

asked by anonymous 02.02.2016 / 18:41

1 answer

What relationship between MVC and Project Standards? Junction of SQL SERVER Selects

score 2 · Accepted Answer

I do not see why your code does not work, it looks okay. What may be happening is getting the data wrong. Have you checked it yet?

When using select you have 2 options. The traditional one (like you did) and also using ng-repeat (I'll show you later).

Traditional

The way you did is correct and the result should not be interfered with. The reason you see number:3 is due to a change that Angular suffered while switching to version 1.4 . This can be removed using a 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

I particularly avoid using this because it is a work-around, but ... In any case, you can also set the options using a ng-repeat , eg:

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

Despite the options, the way you are using should be resolved by using the track by option. Here is an example that I did and that works correctly with the 3 models: What you did, what uses track by and with ng-repeat :

link