Предположим, я создаю систему бронирования для вечеринки. Каждый гость должен ответить на многие вопросы, чтобы сделать оговорку, и среди них: "Тебе не менее 21 года?" И "Планируете выпить на вечеринке?". (Нам нужно знать, сколько пива нужно заказать!)
Предположим, что я пишу следующее как часть моей угловой формы:
<div>
Are you at least 21 years old?
<select ng-model="AgeGroup">
<option value='1'>Yes</option>
<option value='2'>No</option>
<option value='3'>Maybe</option>
<option value='4'>I don't know</option>
<option value='5'>I refuse to answer</option>
</select>
</div>
<div>
Do you plan to drink?
<select ng-model="Drink">
<option value='1'>Yes</option>
<option value='2'>No</option>
<option value='3'>Maybe</option>
<option value='4'>I don't know</option>
<option value='5'>I refuse to answer</option>
</select>
</div>
(Я поставил здесь пять вариантов, чтобы сделать его более похожим на мою реальную проблему.)
Предположим, что я передаю приведенный выше код моему супервизору, который говорит: "Это выглядит великолепно, но я забыл рассказать вам часть требования: если пользователь дает какой-либо ответ, кроме" Да "," Вам не менее 21 года, не показывайте вопрос "Планируете выпить?". и записать "Нет" в качестве ответа на этот вопрос.
Я думаю, что это не проблема! Я могу просто использовать директиву ng-if
чтобы условно скрыть второй вопрос.
Я делаю это и устанавливаю условие, чтобы показать вопрос о потреблении только в том случае, если AgeGroup === 1'
Пока что так хорошо, что скрывает вопрос о питье, когда пользователь не указывает, что ему не менее 21.
Тем не менее, вышесказанное не касается вопроса о том, что пользовательская оговорка должна сказать, что он не пьет.
Я попытался сделать это, используя атрибут ng-change
чтобы указать, что, когда пользователь выбирает ответ, отличный от "Да", "Вы не моложе 21 года?", Модель для "Планируете выпить?". получает значение no, но это вызывает ошибки.
Теперь, когда я настроил Angular, чтобы скрыть вопрос о питье, когда пользователь не сказал, что ему по меньшей мере 21, как мне настроить его так, чтобы поле Drink
в модели было "Нет"?
Если это вообще возможно, я хотел бы применить это правило в форме, а не в контроллере.
Вы можете использовать ng-change
чтобы сделать это следующим образом:
<select ng-model="AgeGroup" ng-change="Drink = AgeGroup == 1 ? Drink : '2'">
В вашем контроллере вы должны просмотреть переменную AgeGroup
и соответственно изменить значение Drink
.
Видя подход @dave. Я бы использовал только часовой подход, если вам нужно больше логики, чем это можно сделать в выражении.
$scope.$watch('AgeGroup',function(newValue,oldValue){
if(newValue !== '1') {
$scope.Drink = '2';
// other messaging / logic here.
}
});
И в вашем шаблоне вы можете отключить второй выбор, используя ng-disabled
.
<div>
Are you at least 21 years old?
<select ng-model="AgeGroup">
<option value='1'>Yes</option>
<option value='2'>No</option>
<option value='3'>Maybe</option>
<option value='4'>I don't know</option>
<option value='5'>I refuse to answer</option>
</select>
</div>
<div>
Do you plan to drink?
<select ng-model="Drink" ng-disabled="AgeGroup !== '1'">
<option value='1'>Yes</option>
<option value='2'>No</option>
<option value='3'>Maybe</option>
<option value='4'>I don't know</option>
<option value='5'>I refuse to answer</option>
</select>
</div>