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

Question

I would like to send the data from the UI-Select to the Tags-Input. For instance, if I select a value from the UI-Select, then hope the Tags-Input receives it with NG-MODEL.

Here is the code:

<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>

I thought putting {{$select.selected.member_name}} in the ng-model in tags-input would be working, but it receives nothing.

Does anyone know what the problem is? Please help me!

Answer 1

Update:

Based on new requirement for multiple selection, please check the below fiddle.

JSFiddle

For this requirement you dont even need the directive, since anyway the output of ui-select is an array and ng-tags-input also expects and array so there is no problem for multiselection.

First Answer:

Sorry for the late reply, the problem with your code was that <tags-input> needs to have the same ng-model as <ui-select>, but there is a catch, ng-tags-input elements expects a list. So my solution for this problem is to add parsers to convert the ng-model into a list, then we need to configure the ng-tags-input to take the display property as member_name and key property as member_email like so.

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

Please find below a fiddle with the working example.

JSFiddle

Also the directive that does the parsing will look like this.

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

I hope this solves your issue.