Repeat element with ng-Repeat

Asked

Viewed 588 times

3

I have a form, which can be inserted another group of "Name" and "Agency" just by clicking the button. I am using Angularjs and ng-Repeat to repeat the fields the moment I click on +. However, the list of Agency names "loses" the moment I enter a new contact.
How do I make this list "persist"?
** #select-tools refers to the Field "Search agency" inserir a descrição da imagem aqui

When I enter one more there is no element in the list inserir a descrição da imagem aqui

HTML

<div class="form-group">
        <h4>Contatos</h4>
        <div ng-repeat="contato in contatos" class="form-group">
            <label class="control-label col-sm-2">Nome:</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" ng-model="contato.nome">
            </div>
          <div class="form-group">
                <h4>Ag&ecirc;ncia</h4>
                <div class="control-group">
                <select ng-options="agencia.nome for agencia in listaAgencias" class="demo-default" placeholder="Selecionar a ag&ecirc;ncia..." selectize>
          </select>
                </div>
        </div>
            </div>
        <div align="right">
            <button type="button" class="btn btn-xs btn-primary" ng-click="novoContato()">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
            <button type="button" class="btn btn-xs btn-danger" ng-click="excluirContato()"
                    ng-disabled="contatosVazio()">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </div>
            </div>

Controller.js

oknok.controller('veiculoController', function ($scope, veiculosAPI, agenciasAPI) {
    agenciasAPI.getAgencias().success(function (data) {
        var embedded = data._embedded;
        $scope.listaAgencias = embedded.agencias;
        $('#select-tools').selectize({
            maxItems: null,
            valueField: 'nome',
            labelField: 'nome',
            searchField: 'nome',
            options: embedded.agencias,
            create: false
        });
    }).catch(function (error) {
        alert("Erro ao obter listagem de agencias");
        console.log(JSON.stringify(error));
    });
    $scope.contatos = [{
        nome: "",
        dados: []
    }];

    $scope.cancelar = function () {
        window.location.href = "/"
    };

    $scope.novoContato = function () {
        $scope.contatos.push({
            nome: "",
            email: ""
        });
    };

    $scope.excluirContato = function () {
        var ultimoItem = $scope.contatos.length - 1;
        $scope.contatos.splice(ultimoItem);
    };

    $scope.contatosVazio = function () {
        if (!($scope.contatos.length <= 1)) {
            return false;
        } else {
            return true;
        }
    };

});

1 answer

2


It seems to me that the ng-repeat is creating a different scope for each instance of agencia, and each has a different copy of listaAgencias.

Initialize the scope variable early in the controller, so that subsets can access it in a shared way:

oknok.controller('veiculoController', function ($scope, veiculosAPI, agenciasAPI) {
    agenciasAPI.getAgencias().success(function (data) {

        $scope.listaAgencias = [];

        var embedded = data._embedded;
        [...]
  • This select is responsible only for another field, the field that is problematic is independent of this code. The only line that initializes my field is: <select ng-options="agencia.nome for agencia in listaAgencias" class="demo-default" placeholder="Selecionar a ag&ecirc;ncia..." selectize>

  • @Danielamarquesdemorais Ah, I understand - thanks for the clarification. I changed the answer to cover another possibility.

Browser other questions tagged

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