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

【问题标题】：How can I pass the data selected from UI-Select to a Tags-Input?如何将从 UI-Select 中选择的数据传递给标签输入？
【发布时间】：2017-08-25 23:31:09
【问题描述】：

我想将数据从 UI-Select 发送到 Tags-Input。例如，如果我从 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}} 放在标签输入的 ng-model 中会起作用，但它什么也没收到。

有谁知道问题出在哪里？请帮帮我！

【问题讨论】：

标签输入应该像<tags-input ng-model="selected.member_name"> </tags-input>
感谢您的建议。我试过了，但没有用。我也试过 {{selected.member_name}} 甚至 {{selected.member.member_name}}。你能帮帮我吗？
你能分享一个JSFiddle来解决这个问题吗，它会更容易调试，只需最少的代码突出问题。
@Naren，我在 jsfiddle.net/dbj0729/ebkgdude/5 创建了 JSFiddle，但我想我错过了一些东西，因为这是我第一次使用它。我发布了代码。希望这行得通。期待您的来信。谢谢。

标签： angularjs bootstrap-tags-input

【解决方案1】：

更新：

基于多选的新要求，请检查下面的小提琴。

JSFiddle

对于这个要求，你甚至不需要指令，因为无论如何 ui-select 的输出是一个数组，而 ng-tags-input 也需要一个数组，所以多选没有问题。

第一个答案：

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

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

请在下面找到工作示例的小提琴。

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 添加项目？如果我从选择选项中选择另一个项目，那么第一个项目就会消失。不过，我真的很感谢您的工作和 JSFiddle！ :)
@Jay 不客气，我已经针对新要求更新了答案。
再次感谢您！不仅解决了问题，还得到了好评！非常感谢:)

【解决方案2】：

$select 范围内的问题仅存在于 ui-select 标签内，因此您需要更改模型名称，因为 $select 在标签输入中未定义，因此请尝试删除 $select 并尝试它。

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

【讨论】：

感谢您的建议。我试过了，但没有用。我也试过 {{selected.member_name}} 甚至 {{selected.member.member_name}}。你能帮帮我吗？
你能给我发个 plunkr 让我看看
@Jay 尝试使用 ng-model="selected.member_name" 删除 ''{{" "}}'' 如果这不起作用给我一个反馈给我一个 plunkr
试试这个小提琴我用输入而不是标签输入试试它会成功jsfiddle.net/vignesh230794/Lv9mo66a/595
感谢 Vignesh 的 JSFiddle！它非常全面！一切顺利！。