如何在AngularJS选择中显示当前选定选项的缩短文本？

Question

I have a select. Some of the options in the select are very, very long, and the space for the select to sit in is quite short. For reasons of non-native select design hacks, I need the currently-selected option text to be shorter than the space the select element actually occupies.

I want the full text to be displayed when the element is active, eg when all the options are displayed. Once an object is selected and the element is not active, I want a shorter text to be displayed.

I can do this by hiding the select and putting the shortened text into an element positioned absolutely over the select, but this brings up a world of cross-browser pain- hiding the select while allowing it to activate when clicked has EXTREMELY variable results across different platforms.

Here's a Plunkr showing an example of this technique.

<div class="has-select">
  <select ng-model="activity" ng-options="c.name for c in options" ng-init="activity = options[0]">
  </select>
  <span class="short">
    {{ activity.name | limitTo: 30 }}
  </span>
</div>

Does anyone know a way to do this that would use only the standard select mark-up and not rely on additional elements?

Answer 1

There are a few problems to achieving this:

• You can't use a smart "substring" function in Angular's ng-option since this will cause a rebind.

• Even if you have a logic triggered substring this won't affect the "dropdown" when it is active, seems like the browser (at least Chrome) is binding the data in the dropdown before ng-click happen, badly written example here .

My recommendation would be to go with a "custom select" implementation similar to FlatUI (but Angular style of course!). This will probably be the least painful way to achieve this.