<span> Текстовые обновления на основе опции <select>

Question

<span> Текстовые обновления на основе опции <select>

0

У меня есть следующий элемент <select>:

<select ng-model="pTitle">
  <option value="Mr.">Mr.</option>
  <option value="Mrs.">Mrs.</option>
  <option value="Ms.">Ms.</option>
</select>

Когда выбрана опция, я меняю текст так.

<section>
    Greetings, <span ng-bind="pTitle"></span> Jones!
</section>

Это отлично работает. Теперь то, что я хотел бы сделать, это изменить другой текст, основанный на изменении ng-bind.

Например, в <section> ниже, в зависимости от их выбора, я бы переключился между his и her:

<section>
    According to <span ng-bind="pTitle"></span> Jones, his **(or her)** coding ability needs some work!
</section>

Каков правильный способ сделать это? Заранее спасибо.

DaveyLaser 24 сен. 2015, в 06:24

Источник

Теги:

angularjs

2 ответа

2

Вы можете использовать настраиваемый фильтр, который преобразует выбранное значение в нужную пронум.

Подобно:

angular.module('myApp').filter('possessivePronoum', function() {
  return function(title) {
    return title === 'Mr.' ? 'his' : 'her';
  };
});

И используйте его вот так:

<section>
  According to <span ng-bind="pTitle"></span> Jones, <span ng-bind="pTitle | possessivePronoum"></span> coding ability needs some work!
</section>

Предупреждение: непроверенный код

gfpacheco 24 сен. 2015, в 02:01

Ещё вопросы

Pranav C Balan · Accepted Answer · 2015-09-24T01-55-00.000Z

Вы можете использовать ng-if

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones,  <span ng-if="pTitle=='Mr.'">His</span><span ng-if="pTitle=='Mrs.'||pTitle=='Ms.'">Her</span> coding ability needs some work!
  </section>
</div>

Обновление: Угловой 1.1.5 добавлен тернарный оператор, поэтому теперь мы можем просто написать

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' ? 'His' : 'Her' }} coding ability needs some work!
  </section>
</div>

или в предыдущих версиях

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' && 'His' || 'Her' }} coding ability needs some work!
  </section>
</div>

Хотя эти ответы на самом деле работают, они являются плохой практикой, поскольку у вас будет много дублированного кода. Даже хуже, если вам нужно добавить еще один вариант
@gfpacheco: Будет хуже, когда он это повторяет. В этом случае будет лучше использовать фильтр согласно вашему ответу ...