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>

第二个是＆＃34; textarea＆＃34; ：

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

我想实现这个目标：

当我改变＆＃34; myModel＆＃34;通过从第一个选择选项中选择另一个人名 - ＆gt;我想设置适当的邮件＆＃34;在textarea。

实施例。当我选择＆＃34; Alice＆＃34; - ＆GT;我想展示＆＃34; A级＆＃34;在textarea。此外，当我多选＆＃34; Alice＆＃34;，＆＃34; Bob＆＃34; - ＆GT;我想展示＆＃34; A级，B1级＆＃34;

你能这么善良并帮助我如何实现这一目标？（Multiselect由＆＃34; nya-select＆＃34;插件完成 - ＆gt;所以这没关系。我不知道如何根据名称显示＆＃34; mail＆＃34;来自arrayCollection的值...

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”

上查看plunker

Answer 2

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

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

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

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

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。

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

2 个答案: