Как использовать Угловое, чтобы условно установить второе значение формы при выборе?

Question

Предположим, я создаю систему бронирования для вечеринки. Каждый гость должен ответить на многие вопросы, чтобы сделать оговорку, и среди них: «Тебе не менее 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.

Однако вышеизложенное не затрагивает проблему, необходимо указать, что он не пьет.

I ha ve попытался сделать это, используя атрибут ng-change, чтобы указать, что, когда пользователь выбирает ответ, отличный от «Да», «Если вам не менее 21 года?», модель для «Планируете выпить?» нет, но это вызывает ошибки.

Теперь, когда я настроил Angular, чтобы скрыть вопрос о питье, когда пользователь не сказал, что ему не менее 21, как мне настроить его так, чтобы поле Drink в модели было «Нет»?

Если возможно, я хотел бы применить это правило в форме, а не в контроллере.

Answer 1

Вы можете использовать ng-change сделать это следующим образом:

http://jsfiddle.net/tnj22bcn/

<select ng-model="AgeGroup" ng-change="Drink = AgeGroup == 1 ? Drink : '2'"> 

Answer 2

В вашем контроллере вы должны посмотреть переменную AgeGroup и соответственно изменить значение Drink.

Видение подхода @ Дейва. Я бы использовал только часовой подход, если вам нужно больше логики, чем это можно сделать в выражении.

$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>