Question

我想将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}}放在tags-input中的ng-model中会起作用，但它什么也没收到。

有谁知道问题是什么？请帮帮我！

Answer 1

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

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

Answer 2

<强>更新

根据多项选择的新要求，请查看以下小提琴。

JSFiddle

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

第一回答：

对于迟到的回复感到抱歉，您的代码问题是<tags-input>需要与ng-model具有相同的<ui-select>，但是有一个catch，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中选择的数据传递给标签输入？

2 个答案: