Nathan Martins Nathan Martins - 4 months ago 21
Javascript Question

Different Inputs but same data. Input values repeating in both fields - Angular

So, I have written this code here Codepen.IO

<md-content class="md-padding autocomplete" layout="column">
<md-subheader class="md-no-sticky">Managers</md-subheader>
<md-contact-chips ng-model="ctrl.users" md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected">
</md-contact-chips>
</md-content>
<md-content class="md-padding autocomplete" layout="column">
<md-subheader class="md-no-sticky">Project Members</md-subheader>
<md-contact-chips ng-model="ctrl.users" md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected">
</md-contact-chips>
</md-content>


You can see the script on the link

As you can see, if I type User 1 in managers field, and type enter, the same user will be added in Project members too. Except that I want to have the same users available for addition in both fields, but I won't add the same users in both field. What am I doing wrong ?

I'm using angular material, more specifically, contact-chips

Answer

There's no way to have 2 different things since you have the same ngModel on the two inputs.

Change one of them and it will work.