Search code examples
angularjsangular-ui-select

Show hexadecimal color in angularjs ui-select


I have a ui-select, in which one of its attributes called color is in hexadecimal, is it possible with angular js to show that color?

<div class="form-group container-fluid">
    <label class="col-md-2 control-label">Categoría:</label>
    <div class="col-md-10">
      <ui-select ng-model="activity.category" theme="bootstrap"  title="Selecciona una categoría">
        <ui-select-match placeholder="Selecciona una categoría">
          {{ $select.selected.name }}
        </ui-select-match>
        <ui-select-choices repeat="category in categories | filter: $select.search">
          {{ category.name + category.color}}
        </ui-select-choices>
      </ui-select>
    </div>
  </div>

enter image description here


Solution

  • How about this? not tested

    <ui-select-choices repeat="category in categories | filter: $select.search> {{ category.name }} <button style="background-color:{{category.color}}"></button> </ui-select-choices>

    Of course, you could use any <div>, but button is easy for this example.