У меня есть следующий элемент <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>
Каков правильный способ сделать это? Заранее спасибо.
Вы можете использовать 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>
Вы можете использовать настраиваемый фильтр, который преобразует выбранное значение в нужную пронум.
Подобно:
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>
Предупреждение: непроверенный код