different items for each ng repeat AngularJS

Question

different items for each ng repeat AngularJS

Navigation

#1 by (0 votes)

0

I have a contact form that can add more than one contact, but it comes from a ng-repeat I would like to know how I can add multiple contacts in a new div equal to the previous ng repeat first but without repeating the items ;;

this is the >

 <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({});
}

javascript angularjs html5

asked by anonymous 08.02.2018 / 17:57

1 answer

Xaml parameterless constructor Problem with User-Managed Transaction and Flush using JTA and Arquillian

score 0 · Accepted Answer

In your HTML, the telephones and emails arrays are drawn inside the list element that repeats your contacts array:

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

But the objects in the JS code are independent, so every new contact you draw will repeat all emails and phones, not just the email and phone numbers of that specific contact.

In order to have the result that I imagine is what you want, you should do so in JS:

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

emails and telephones should be within collection contacts, reflecting how you want to display in 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>

Notice that now I've placed the ng-repeat of the phones getting the object contact.telephones