Angularjs selects the items in the list and displays them in textarea

advertisements

I have a problem with Angular and nya-select.

Example array in my angular controller:

vm.arrayCollection = [
  { name: 'Alice',      mail: 'Class A' },
  { name: 'Bob', mail: 'Class B1' },
  { name: 'Carl', mail: 'Class A2' },
  { name: 'Daniel', mail: 'Class B2' },
  { name: 'Emi', mail: 'Class A3' },
  { name: 'Flank', mail: 'Class B3' },
  { name: 'George', mail: 'Class C4' },
  { name: 'Harry', mail: 'Class C5' }
];

I have select option element:

<ol class = "nya-bs-select" ng-model = "myModel">
  <li nya-bs-option="person in myController.arrayCollection">
    <a>
      {{ person.name }}
    </a>
  </li>
</ol>

And second one is "textarea" :

  <textarea ng-model="myModel2">
    ... ?
  </textarea >

I would like to achieve this :

When I change "myModel" by choosing another person name from the first select option -> I want to set appropiate "mail" in the textarea.

Ex. when I choose "Alice" -> I would like to display "Class A" in the textarea. Moreover, when I multiselect "Alice", "Bob" -> I would like to display "Class A, Class B1"

Could you be so kind and help me How to achieve this ? (Multiselect is done by "nya-select" plugin -> so this is ok. I do not know how to display "mail" value from arrayCollection on the basis of name...


I am not familiar with the plugin you are using, however, I have tried to achieve what you wanted using multiple attribute of select element.

<select multiple="multiple" ng-model="selectedValues">
      <option ng-repeat="mail in a" value="{{mail.name}}">{{mail.mail}}</option>

    </select>
    <textarea>{{selectedValues}}</textarea>

Please review the plunker at "http://plnkr.co/edit/u2sXnMkYSEYshAcLgyn7?p=preview"