Question

想象一下，我有这样的代码：

<span>Do you like  bananas?</span>
<input type="radio" ng-model="likeBananas" name="likeBananas" value="yes">
<input type="radio" ng-model="likeBananas" name="likeBananas" value="no">
<div ng-if="likeBananas === 'no'">
    <label>Tell us why?</label>
    <textarea ng-model="whyNot" ng-required="likeBananas === 'no'"></textarea>
</div>

这个想法是：如果用户不喜欢香蕉，则需要<textarea>解释。如果用户喜欢香蕉，当然它不是必需的，并且它不会向用户显示。因为这个字段是强制性的，所以我使用ng-required="likeBananas === 'no'，但问题是 - 我真的需要它吗？也许简单required可以做一份工作？因为，当ng-if为false时，HTML中不应包含div的内容。一般问题是 - Angular如何使用ng-if s指令执行元素内部代码，从上到下或从下到上？在第一种情况下，当ng-if为假的元素内部的代码不应该被执行时，如果上面的情况，ng-required在div不存在时也不会计算不需要。我希望你能帮我解决疑惑 - 提前谢谢你。

Answer 1

不，你应该只使用ng-required=true进入ng-if指令（在你的情况下），因为这个指令行为来自DOM的removing/adding 元素在条件切换时。

因此，如果likeBananas !== 'no'，元素

<label>Tell us why?</label>
<textarea ng-model="whyNot" ng-required="likeBananas === 'no'"></textarea>

未包含在DOM中，因此ng-require=true未编译。

Answer 2

请在这里看一下plunker：

http://plnkr.co/edit/fqoUbTXICDv0nNQe9aOL?p=preview

通过制作form元素，您可以通过执行以下操作检查其有效性：

Is the form valid? {{banana.$valid}}

在ng内部执行代码 - 如果它是假的

2 个答案: