如何在进行选择时使用 Angular 有条件地设置第二个表单值？

Question

假设我正在为聚会创建一个预订系统。每位客人必须回答许多问题才能进行预订，其中包括："Are you at least 21 years old?"和"Do you plan to drink at the party?"（我们需要知道要订购多少啤酒！）

假设我在 Angular 表格中写下以下内容：

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

（我在这里选择了五个，让它更像我的真实问题。）

假设我将上面的代码提交给我的主管，他说，“这看起来不错，但我忘了告诉你部分要求：如果用户给出除 'Yes' 之外的任何答案 'Are您至少 21 岁，请不要显示问题 'Do you plan to drink?' 并记录 'No' 作为该问题的答案。

我自己觉得这没问题！我可以简单地使用 ng-if 指令有条件地隐藏第二个问题。

我这样做并设置条件以仅在 AgeGroup === 1' 时显示饮酒问题到目前为止，很好，当用户未能指定他至少 21 岁时隐藏饮酒问题。

但是，以上并没有解决用户预订时必须说明自己不喝酒的问题。

我尝试通过使用 ng-change 属性来指定当用户选择 "Yes" 到 "Are you at least 21 years old?" 以外的答案时，[=40= 的模型] 设置为否，但这会导致错误。

现在我已经设置 Angular 以在用户未说出他至少 21 岁时隐藏饮酒问题，我该如何设置它以便 Drink 字段在模型是 "No"?

如果可能的话，我想在表单而不是控制器中强制执行此规则。

Answer 1

在您的控制器中，您应该观察 AgeGroup 变量并相应地修改 Drink 值。

Seeing @dave's approach. I would only use the watch approach if you need more logic to happen than can be done in an expression.

$scope.$watch('AgeGroup',function(newValue,oldValue){
  if(newValue !== '1') {
    $scope.Drink = '2';
    // other messaging / logic here.
  }
});

并且在您的模板中，您可以使用 ng-disabled 禁用第二个 select。

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

Answer 2

您可以使用 ng-change 这样做：

http://jsfiddle.net/tnj22bcn/

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

如何在进行选择时使用 Angular 有条件地设置第二个表单值？

How to use Angular to conditionally set a second form value when a selection is made?

angularjs

angularjs-ng-change