当 ng-if 为 false 时执行里面的代码

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 时，div 的内容不应出现在 HTML 中。一般问题是 - Angular 如何使用 ng-ifs 指令， 从上到下 或从下到上 [=26] 执行元素内部的代码=]？在第一种情况下，当 ng-ifs 为 false 时，不应执行元素内的代码，并且在上述情况下，当 div 不存在且可能不需要时，不计算 ng-required .我希望你能帮助我解决我的疑惑-提前谢谢你。

Answer 1

不，您应该简单地将 ng-required=true 用于 ng-if 指令（在您的情况下），因为此指令行为 removing/adding 来自 DOM条件切换时里面的元素。

因此，如果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-if 为 false 时执行里面的代码

Execution of code which is inside ng-if when it is false

html

javascript

angularjs

angularjs-directive

angular-ng-if