Как показать другой текст, когда выбранный тег открыт и закрыт?

Question

У меня есть простой тег select, который имеет несколько простых опций, таких как:

<select name="select" id="select">
    <option value="1">=</option>
    <option value="2">!=</option>
    <option value="3">^</option>
</select>

Теперь я хочу, чтобы, когда пользователь нажимал на тег select, я показывал буквальные тексты вместо = , ! = , ^ , я имею в виду равно , не равно и начинаются с , но когда пользователь выбрал одно из значений, отобразить фактический текст как выбранный.

Я использую angularjs в этом представлении.

Answer 1

Вы можете создать массив объектов для выпадающих значений в вашем контроллере:

$scope.options=[
 {
  Description:"=", 
  Value:"equals"
 },
 {
  Description:"!=", 
  Value:"not equals"
 },
 {
  Description:"^", 
  Value:"start with"
 }
];

и в вашем html вы можете перебирать свой объект параметров, отображать только «Описание» ваших объектов в параметрах выбора, и после выбора параметра он будет назначен вашей ng-модели:

<select ng-model="mySelect" ng-options="o as o.Description for o in options" >
</select>
<div>
  {{mySelect.Value}}
</div>

Посмотрите на эту рабочую скрипку: https://jsfiddle.net/xnzp78ju/

Answer 2

Вам нужно будет сделать следующее:

<select name="select" id="select">
    <option value="equals">=</option>
    <option value="not equals">!=</option>
    <option value="start with">^</option>
</select>

В вашем коде AngularJS вам нужно будет получить значение (что наиболее часто используется) вместо текста между тегами параметров. Таким образом, вы по-прежнему можете отображать символы между <option></option>, но значение скрыто в тегах параметров, а фактическое слово, которое вы хотите установить в качестве значения параметров