问题描述:

Suppose I am creating a reservation system for a party. Each guest must answer many questions to make a reservation, and among these are: "Are you at least 21 years old?", and "Do you plan to drink at the party?" (We need to know how much beer to order!)

Suppose that I write the following as part of my Angular form:

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

(I put five selections here to make it more like my real problem.)

Suppose that I submit the above code to my supervisor who says, "This looks great, but I forgot to tell you part of the requirement: If the user gives any answer other than 'Yes' to 'Are you at least 21 years old, do not show the question 'Do you plan to drink?' and record 'No' as the answer to that question.

I think to myself that this is no problem! I can simply use the ng-if directive to conditionally hide the second question.

I do this and set the condition to show the drinking question only if AgeGroup === 1' So far, so good, that hides the drinking question when the user fails to specify that he is at least 21.

However, the above doesn't address the issue that the user's reservation must say that he is a non-drinker.

I have tried to do this by using the ng-change attribute to specify that when the user selects an answer other than "Yes" to "Are you at least 21 years old?", the model for "Do you plan to drink?" gets set to no, but this causes errors.

Now that I've rigged up Angular to hide the drinking question when the user fails to say he is at least 21, how do I set it up so that the Drink field in the model is "No"?

If at all possible, I would like to enforce this rule in the form rather than the controller.

网友答案:

You could use the ng-change to do it like this:

http://jsfiddle.net/tnj22bcn/

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

In your controller, you should watch the AgeGroup variable and modify the Drink value accordingly.

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.
  }
});

And in your template, you can disable the second select using 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>
相关阅读:
Top