Angularjs从列表中选择元素并显示在textarea中

Question

我对 Angular 和 nya-select 有疑问。

我的角度控制器中的示例数组：

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' }
];

我有选择选项元素：

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

第二个是“textarea”：

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

我想实现这个：

当我通过从第一个选择选项中选择另一个人名来更改“myModel”时 -> 我想在文本区域中设置适当的“邮件”。

例如。当我选择“Alice”时 -> 我想在 textarea 中显示“A 类”。此外，当我多选“Alice”、“Bob”时 -> 我想显示“A 类，B1 类”

你能这么好心并帮助我如何实现这一目标？ （多选是由“nya-select”插件完成的->所以没关系。我不知道如何根据名称显示arrayCollection中的“mail”值......

Answer 1

我不熟悉您使用的插件，但是，我尝试使用 select 元素的多个属性来实现您想要的功能。

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

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

请在“http://plnkr.co/edit/u2sXnMkYSEYshAcLgyn7?p=preview”查看插件

Answer 2

根据下面的 cmets 更新答案。 OP 要求在页面上重用一个通用元素。可能还有其他/更简单的方法可以做到这一点，但我正在扩展之前的答案。

将每个列表元素中的value 属性设置为person（这对于常规的多选列表是必需的，但对于 nya-select 可能不需要）：

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

有序列表中的 ng-model myModel 应该包含选择。我们将使用它来呈现文本区域中的内容。将以下指令添加到应用程序：

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 是绑定到有序列表的模型，mail 是要在指令/过滤器中使用的属性。

使用常规多选列表工作 jsfiddle。

最新更新 jsfiddle 基于以下讨论。