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

0

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

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

  • 0
    Какие ошибки вызываются ng-change?
Теги:
angularjs-ng-change

2 ответа

2
Лучший ответ

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

http://jsfiddle.net/tnj22bcn/

<select ng-model="AgeGroup" ng-change="Drink = AgeGroup == 1 ? Drink : '2'">
Поделиться
  • 0
    Гораздо чище, чем мой подход. Мне это нравится.
0

В вашем контроллере вы должны просмотреть переменную 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню