How to fill fields in AngularJS from JSON return

Question

How to fill fields in AngularJS from JSON return

Navigation

#1 by (0 votes)

0

How do I fill 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>

angularjs json

asked by anonymous 12.02.2017 / 20:02

1 answer

Rename application in Django Admin PHP - error handling

score 0 · Answer 1

To fill 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>