Change color of tag

[lewi12s]

In my opinion is nice to have feature that allows change of tag color (bg, text) in input bar based on JS Object property for eg. {_uiSelectLabelColorBg: #eee}

I mean "tag" like in example: http://angular-ui.github.io/ui-select/demo-tagging.html

What do you think?

[user378230]

Your tagging function can return an object with some kind of colour indicator, then just your template to match.

See related: #1491 (comment)

If you update the issue with your working example it can be used for reference in future 😃

[lewi12s]

Simple working solution:
function from my controller:

vm.transformTag = function(text) {
  return {
    searchText: text,
    _uiSelectLabelColorBg: '#eee'
  }
}

my template html:
<ui-select multiple tagging="vm.transformTag" ...

edited match-multiple.tpl.html

<span class="ui-select-match-item btn btn-default btn-xs" 
           style="background-color: {{$item._uiSelectLabelColorBg}}"
           ...

But how to deal with updates of ui-select component via bower in this situation?

Thanks for reply :)

[stsatlantis]

I would go even further with coloring and styling.

vm.transformTag = function(item) {
  return {
    searchText: text,
    _uiSelectDecorate : function() {
      "background-color" : "red",
      "color" : "white",
      "font-weight": "bold"
    }
  }
}

and change match-multiple.tpl.html as follows:

   <span class="ui-select-match-item btn btn-default btn-xs" 
           ng-style="$item._uiSelectDecorate()"

What do you think about this version?

[lewi12s]

I think your solution is way more flexible than mine.