Question

我需要在表单中显示下一个字段，具体取决于表单中选择的最后一个值。我表单中的所有字段都是独立的视图，特别是ng-include。

这个想法不是在页面加载时显示所有字段，而是根据在前一个字段中选择的值显示下一个字段。

示例1：

我的第一个输入（我的第一个ng-include）是一个文本字段，可能在触发器onBlur上检查值是否正确，然后显示下一个字段（我的第二个ng-include），然后，如果该值正确，然后显示下一个字段（我的第三个ng-include）。

示例2：

这次我的第一个输入（我的第一个ng-include）是一个复选框字段，可能在触发器onBlur上检查值是否正确然后显示下一个字段（我的第二个ng-include ），那么，如果该值是正确的，然后显示下一个字段（我的第三个ng-include）。

感谢。

Answer 1

您熟悉ng-show吗？ - 它显示或隐藏依赖于您在ng-show标记中声明的值的元素。

Answer 2

您可以在ng-form中包装每个字段（或一组字段），并根据当前部分表单的有效性显示下一部分。表单元素通过ng-include传递的事实与方法无关：

<div ng-form="form1">
  <input ng-model="v.one" required min-length="3">
</div>

<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
  <input ng-model="v.two" required min-length="3">
</div>

<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
  <input ng-model="v.three" required>
</div>

当然，这是高级别的，并且不处理在下一个表单显示时先前变为无效的情况。对于那些更复杂的情况，最好在控制器中执行逻辑并通过函数或范围变量公开决策，例如， showForm2()：

<div ng-form="form2" ng-show="showForm2()">
  <input ng-model="v.two" required min-length="3">
</div>

AngularJS：如何根据前一个表单字段的有效性显示下一个表单字段

2 个答案: