How to fill in Angularjs fields from JSON return

Asked

Viewed 631 times

0

How do I fill in selects and inputs, of each item, from a JSON return?

The fields are: produtoAtrib.codigo, produtoAtrib.descricao and produtoTrib.estado.

Javascript:

<!-- Capturar dados do BD e inserir no "$scope.items[]" -->
$scope.init = function(){
    autosaveService.autoload.get({}, {}, function(retorno){
        if(retorno.consulta !== 0){
            var i = 0;
            angular.forEach(retorno, function(item){
                var codigo      = retorno[i].codigo;
                var descricao   = retorno[i].descricao;
                var estado      = retorno[i].estado;

                delete retorno.$promise;
                delete retorno.$resolved;

                $scope.items.push({
                codigo: codigo,
                descricao: descricao,
                estado: estado
                });
            }
        }
    })
}

<!-- Atualizar items após "push" -->
$scope.addAtributos = function (s){
    $scope.produtoAtrib = s;
};

HTML:

<!-- Inserir item -->
<input type="button" ng-click="addItem(s);" value="Inserir">

<!-- Campos individuais para cada idem -->
<div style="display:none;">
    <input type="number" ng-init="s.codigo = 0" ng-model="s.codigo"/>
    <input type="text" ng-init="s.descricao = ''" ng-model="s.descricao"/>

    <select ng-init="s.estado = ''" ng-model="s.estado">
        <option value="" selected="selected"></option>
        <option value="GO">Goias</option>
        <option value="TO">Tocantins</option>  
        <option value="SP">São Paulo</option>       
    </select>
</div>

<!-- Função addAtributos atualiza os itens de "s." para ".produtoAtrib" logo após a inserção no "$scope.items[]"
<div ng-repeat="item in items track by $index">
    <a href="" ng-click="addAtributos(item)" data-toggle="modal" data-target="#myModal">Atributos</a>   
</div>

<!-- Modal com os atributos de cada item -->
<div class="modal fade" id="myModal" role="dialog">
    <!-- .... -->

    <input type="number" ng-model="produtoAtrib.codigo"/>
    <input type="text" ng-model="produtoAtrib.descricao"/>

    <select ng-model="produtoTrib.estado">
        <option value="" selected="selected"></option>
        <option value="GO">Goias</option>
        <option value="TO">Tocantins</option>  
        <option value="SP">São Paulo</option>   
    </select>
    <!-- .... -->
</div>

1 answer

0

To fill in Select from the return of your request, you must use ng-repeat to iterate the results and mount the options:

<select ng-model="produtoTrib.estado">
  <option ng-repeat="obj in objectList" value="{{obj.id}}">
     {{obj.description}}
  </option>
</select>

<div ng-repeat="objInput in produtoAtrib">
    <input type="number" value="{{objInput.codigo}}">
    <input type="text" value="{{objInput.descricao}}">
</div>

UPDATE

<select ng-model="produtoTrib.estado">
  <option ng-repeat="obj in objectList" value="{{obj.id}}">
     Opção {{index}}
  </option>
</select>
  • Hello @Diegosilvalima, my object does not return the "description" of the item, but only the "value". What should I do to use the HTML description itself?

  • @luccasrodrigo, I don’t understand your question, do you want to type the description? , if yes, just switch {{obj.Description}} to the value you want, see the update I made in my code

Browser other questions tagged

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