我有一个问题角度和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.
相关推荐
最新文章