Angularjs select elements from list and display in textarea

Question

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

Answer 1

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"

Answer 2

Answer updated as per the comments below. OP is asking for a generic element to be reused on the page. There are possibly other/easier ways to do this, but I am extending the previous answer.

Set value attribute in each list element to person (this is needed for regular multi-select list, although may not be needed for nya-select):

<li nya-bs-option="person in myController.arrayCollection" value="{{person}}">

The ng-model myModel in the ordered list should contain the selections. We'll use that to render the content in the textarea. Add the following directive to the application:

myApp.directive('txtArea', function() {
    return {
        restrict: 'E',
        replace: 'true',
        scope: {data: '=', property: '@'},
        template: "<textarea readonly>{{result()}}</textarea>",
        link: function(scope, elem, attrs) {
            scope.result = function() {
                var ret = "";
                angular.forEach(scope.data, function(value, key) {
                    var suff = (key === scope.data.length - 1) ? '' : ', ';
                    ret += JSON.parse(value)[scope.property] + suff;
                });
                return ret;
            }
        }
    };
});

The directive is generic and can be reused across controllers. This also adds a comma after each intermediary value. Now replace the textarea element with:

<txt-area data="myModel" property="mail"></txt-area>

myModel is the model bound to the ordered list and mail is the property to use in the directive/filter.

Working jsfiddle with regular multi-select list.

Latest updated jsfiddle based on discussion below.