ng-if 为 false 时执行代码答案

【问题标题】：Execution of code which is inside ng-if when it is falseng-if 为 false 时执行代码
【发布时间】：2015-08-18 22:21:55
【问题描述】：

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

<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>with 解释。如果用户喜欢香蕉，当然不是必需的，也不会显示给用户。因为这个字段是动态的，所以我使用了ng-required="likeBananas === 'no'，但问题是——我真的需要它吗？或许简单的required 可以干活？因为，当ng-if 为假时，div 的内容不应该出现在 HTML 中。一般问题是 - Angular 如何使用 ng-ifs 指令、从上到下或从下到上在元素内执行代码？在第一种情况下，当 ng-ifs 为 false 时，不应执行元素内部的代码，并且在上述情况下，当 div 不存在并且可能不需要时，不会计算 ng-required。我希望你能帮助我解决我的疑问 - 提前谢谢你。

【问题讨论】：

你为什么不试试看呢？将其更改为required，并在likeBananas === 'no' 为真时查看您的表单是否为$valid。（把它放在你的 html 中：{{myForm.$valid}}'). To test your other hypothesis, add an ng-init` 到调用函数的文本区域，该函数用console.log 将消息记录到控制台。确保likeBananas 对测试来说不是“否”。跨度>

标签： javascript html angularjs angularjs-directive angular-ng-if

【解决方案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 未编译。

【讨论】：

【解决方案2】：

请在 plunker 中查看这里：

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

通过创建form 元素，您可以通过以下方式检查其有效性：

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

【讨论】：