Repeat element with ng-Repeat

3

I have a form, this one which can be inserted plus a group of "Name" and "Agency" only when clicking the button. I'm using AngularJS and ng-Repeat to repeat the fields the moment you click + . 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 "Search agency" field

WhenIinsertanother,thereisnoelementinthelist

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

});
    
asked by anonymous 22.07.2015 / 19:27

1 answer

2

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

Initialize the scope variable right at the beginning of controller , so that subscripts 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;
        [...]
    
22.07.2015 / 20:13