如何将从 UI-Select 中选择的数据传递给标签输入？

Question

我想将数据从 UI-Select 发送到标签输入。例如，如果我 select 来自 UI-Select 的值，那么希望 Tags-Input 使用 NG-MODEL 接收它。

代码如下：

<ui-select ng-model="member.selected" theme="bootstrap">
    <ui-select-match placeholder="Select....">{{$select.selected.member_name}}</ui-select-match>
    <ui-select-choices repeat="member in members | filter: $select.search">
    <div ng-bind-html="member.member_name | highlight: $select.search"></div>
    <small ng-bind-html="member.member_email | highlight: $select.search"></small>
    </ui-select-choices>    
</ui-select>

<tags-input ng-model="{{$select.selected.member_name}}">
</tags-input>

我认为将 {{$select.selected.member_name}} 放入 tags-input 的 ng-model 中会起作用，但它什么也没收到。

有人知道问题出在哪里吗？请帮助我！

Answer 1

$select 范围内的问题仅存在于 ui-select 标签内，因此您需要更改模型名称，因为 $select 在标签中未定义-input so try remove $select and try it.

<tags-input ng-model="{{selected.member_name}}"></tags-input>

Answer 2

更新：

根据新的要求ui对多个 selection 的评论，请检查以下 fiddle。

JSFiddle

对于这个 requirement 你甚至不需要这个指令，因为无论如何 ui-select 的输出是一个数组并且 ng-tags-input 也期望和数组所以 multiselection.

没有问题

第一个答案：

抱歉回复晚了，您的代码的问题是 <tags-input> 需要与 <ui-select> 具有相同的 ng-model，但有一个问题，ng-tags-输入元素需要一个列表。所以我对这个问题的解决方案是添加 parsers 将 ng-model 转换为列表，然后我们需要配置 ng-tags-input 以显示属性为 member_name和键属性为 member_email 像这样。

<tags-input ng-model="member.selected" display-property="member_name" key-property="member_email"></tags-input>

请在下面找到一个 fiddle 和工作示例。

JSFiddle

执行解析的指令也将如下所示。

app.directive('formatModel', function(){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel){
            ngModel.$parsers.push(function(value){
                return [value];
            });
        }
    };
});

希望这能解决您的问题。

如何将从 UI-Select 中选择的数据传递给标签输入？

How can I pass the data selected from UI-Select to a Tags-Input?

angularjs

bootstrap-tags-input