Стильная часть текста ng-option - PullRequest
Новая
       10

Стильная часть текста ng-option

0 голосов
/ 29 июня 2018

Нужна помощь в оформлении опции angularjs ng. Я хочу, чтобы это выглядело так: enter image description here

Итак, у меня есть такая опция ng. 

<select ng-options="servicepoint.id as servicepoint.name+' '+servicepoint.routeDistance+' m' for servicepoint in $ctrl.servicepoints">
</select>

Этот результат таков:

enter image description here

Так вы, ребята, знаете, могу ли я присвоить только последнюю часть с метрами синим цветом и сделать эллипс, если текст слишком длинный. Дистаны должны быть видны все время. Кажется, что <option> не может иметь <span> -метки или что-то в этом роде, чтобы я мог оформить текст?

Я пытался поместить опцию в ng-repeat и стилизовать ее там, но безуспешно. 

<select>
    <option ng-repeat="service in $ctrl.servicepoints">
        <span>{{service.name}}</span><span style="color: blue">{{service.routeDistance}} m</span>
    </option>
</select>

Кто-нибудь, кто может направить меня в правильном направлении?

1 Ответ

0 голосов
/ 29 июня 2018

К сожалению, вот полный ответ из того, что я собрал, я хотел бы найти более простой взлом, но это факты:

  • Этот элемент отображается операционной системой, а не HTML
  • Его нельзя стилизовать с помощью CSS .
  • Что еще хуже, элемент option не будет отображать никаких элементов внутри него , единственный текстовый узел может быть дочерним для элемента option в DOM.

Решение:

Существуют сменные плагины, которые выглядят как, но на самом деле состоят из обычных элементов HTML, которые МОГУТ быть стилизованы. Здесь вы должны начать поиск.

Для дальнейшего объяснения: этот текст

Приличный текст, который я прочитал, решает проблему от открытия до фазы решения.

...