Using title attribute in ui-select

Question

I have a situation where the text to select is too long and doesn't fit in the list width or in the selected field. So at least I need to show on mouse hover the complete name using the title attribute in span.

I tried this:

   <ui-select ng-model="f.fieldb.value">
      <ui-select-match>
        <span ng-bind="$select.selected.nm" title="$select.selected.nm"></span>
      </ui-select-match>
      <ui-select-choices repeat="item in (fieldsList | filter: $select.search)">
                <span ng-bind="item.nm" title="f.item.nm"></span>
      </ui-select-choices>
   </ui-select>

but I get this (note that the text shown next to the mouse pointer is incorrect):

Is it possible to get the correct names?

Tried wrapping the variable in curly braces {{}}? – cnorthfield Jul 31 '16 at 10:32 — cnorthfield, Jul 31 '16 at 10:32

cnorthfield · Accepted Answer · 2016-07-31T10:42:01.233

4

You need to evaluate them as expressions like so:

title="{{f.item.nm}}"

You are currently setting the title as the string "f.item.nm", not the value of nm held in the item object

edited Jul 31 '16 at 10:42

answered Jul 31 '16 at 10:37

cnorthfield

3,384
15
22

Using title attribute in ui-select

1 Answers1