我有一个问题角度和NYA选。

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>

和第二个是textarea的

And second one is "textarea" :

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

我想实现这一点：

I would like to achieve this :

当我从第一选择选项中选择另外一个人的名字更改基于myModel - >我想在textarea的设置appropiate邮件

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

防爆。当我选择爱丽丝 - >我想在文本区域，显示A级。此外，当我多选爱丽丝，鲍勃 - >我想显示A级，B1级

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"

你能会这么好心帮我如何实现这一目标？ （多选由NYA-选择插件完成 - >所以这是确定的，我不知道如何从ArrayCollection中显示邮件数值名称的基础上...

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

推荐答案

答更新按照下面的评论。 OP是要求在页面上重复使用一个通用的元素。还有其他可能的/更简单的方法来做到这一点，但我延长了previous答案。

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.

设置值中的每个列表元素属性人（这是需要定期多选列表，虽然可不需要对NYA选择）：

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

在NG-模型基于myModel 排序列表中应该包含的选择。我们将用它来渲染textarea的内容。以下指令添加到应用程序：

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

该指令是通用的，并且可以跨控制器被重用。这也增加了每个中间值后加上逗号。现在替换的textarea 与元素：

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

基于myModel 是绑定到有序列表和邮件模型在指令/过滤器使用属性

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

的jsfiddle 与常规多选列表。

最新更新的jsfiddle 基于下面的讨论。

Latest updated jsfiddle based on discussion below.