0

Tenho um formulário de contatos que é possível adicionar mais de um contato, mas ele vem por um ng-repeat eu gostaria de saber como que posso adicionar varios contatos em uma nova div igual a anterior do ng repeat primeiro mas sem repetir os itens;;

esse é o codigo >

 <div class="row">
            <div class="allContacts">
                <ul class="collapsibleContact col s12 m11" id="collapsibleContact" data-collapsible="accordion" ng->
                    <li class="contacts" ng-repeat="contact in contacts">
                        <div class="collapsible-header col s12 m11">
                            <i class="material-icons">supervisor_account</i>Contato
                            <input id="name" class="name" type="text" ng-model="customers.name" class="validate">
                        </div>
                        <div class="col s12 m1">
                            <a class="btn-floating btn-large waves-effect waves-light red" ng-click="addNewContact($index);" class="addContact">
                                <i class="material-icons pink accent-3">add</i>
                            </a>
                        </div>
                        <div class="collapsible-body">
                            <span>
                                <div class="newPhone" ng-repeat="telephone in telephones">
                                    <div class="moreContacts input-field col m5 s12" id="moreContacts">
                                        <i class="material-icons prefix">phone</i>
                                        <input id="number" type="text" ng-model="customers.number" class="number validate">
                                        <label for="number">Telefone</label>
                                    </div>
                                    <div class="input-field col m5 s12">
                                        <input id="type" type="text" ng-model="customers.type" class="type validate">
                                        <label class="active">Tipo</label>
                                    </div>
                                    <div class="col s12 m2">
                                        <a class="btn-floating btn-large waves-effect waves-light red moreTelephones" ng-click="moreTelephones();">
                                            <i class="material-icons pink accent-3">add</i>
                                        </a>
                                    </div>
                                </div>
                                <div class="mewEmail" ng-repeat="email in emails">
                                    <div class="input-field left-align col s12 m10">
                                        <i class="material-icons prefix">email </i>
                                        <input type="text" id="" ng-model="customers.email" class=" validate">
                                        <label for="perfil">Email</label>
                                    </div>
                                    <div class="col s12 m2">
                                        <a class="btn-floating btn-large waves-effect waves-light red moreEmails" ng-click="moreEmails();">
                                            <i class="material-icons pink accent-3">add</i>
                                        </a>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </li>
                    <br>
                    <br>
                </ul>
            </div>
        </div>

controller

    $('.collapsibleContact').collapsible({});

$scope.customers;
// metodo que add um novo contato
$scope.contacts = [{}];
$scope.addNewContact = function() {
    $scope.contacts.push({});
};
//fim do metodo de add novo contato
//add mais emails
$scope.emails = [{}];
$scope.moreEmails = function() {
    $scope.emails.push({});
};
//fim mais emails
//mais telefones
$scope.telephones = [{}];
$scope.moreTelephones = function() {
    $scope.telephones.push({});
}

1 Resposta 1

0

No seu HTML os arrays telephones e emails estão desenhados dentro do elemento lista que repete o seu array contacts:

<li class="contacts" ng-repeat="contact in contacts">
    <div class="newPhone" ng-repeat="telephone in telephones">
    ...
    <div class="mewEmail" ng-repeat="email in emails">
    ...
</li>

Mas os objetos no código JS são independentes, então todo contato novo que você desenhar, vai repetir todos os emails e telefones, e não somente os emails e telefones daquele contato específico.

Para ter o resultado que imagino que é o desejado, deveria fazer assim no JS:

$scope.contacts = [{emails:[], telephones: []}];
$scope.addNewContact = function() {
    $scope.contacts.push({emails:[], telephones: []});
};

Os emails e telephones devem estar dentro da collection contacts, refletindo a forma como você deseja exibir no HTML:

<li class="contacts" ng-repeat="contact in contacts">
    <div class="newPhone" ng-repeat="telephone in contact.telephones">
    ...
    <div class="mewEmail" ng-repeat="email in contact.emails">
    ...
</li>

Perceba que agora eu coloquei o ng-repeat dos telefones obtendo do objeto contact.telephones

1
  • Obrigado! funcionou!
    – Jacksssss
    13/02/2018 às 3:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .