Question

我有一个包含多个ng-repeat块和其他没有ng-repeat的窗体。我该如何等待所有内容加载完毕再呈现表单

例如

<form name="forms.confirmForm" ng-submit="submitForm()">

    <div>
      <div ng-repeat="phone in candidate.phones" style="position:relative">
       -- write out some value 
    </div>

    <div class="small-12">
      <label>first name
      </label>
      <input name="firstName" type="text"  />

      <div ng-repeat="phone in candidate.email" style="position:relative">
           -- write out some value 
      </div>
    </div>

    <div class="apply-bar">
        <button class="button button-apply" type="submit">
          apply
        </button>
    </div>
</form>

**信息来自模型，并且仅加载一次。 ng-repeat只是参与模型的一部分并进行迭代

Answer 1

使用ng-if检查是否已加载数组项。

<form name="forms.confirmForm" ng-submit="submitForm()"
      ng-if="candidate.phones.length > 0 && candidate.email.length > 0">

Answer 2

您可以在div中使用ng-if

.addValueEventListener

Answer 3

有两种方法可以处理此问题。

您使用空的电话/电子邮件数组初始化模型（候选）。在这种情况下，您无需在模板中执行任何操作，因为ng-repeat将应用0次。结果什么也没渲染。
当您没有模型（候选）时，可以使用ng-if阻止渲染，和/或在模型没有电话/电子邮件时，可以使用ng-if阻止ng-repeat尝试渲染。

根据第二个选项尝试此操作

<form name="forms.confirmForm" ng-submit="submitForm()">

    <div ng-if="candidate"> <!--Prevent rendering if there is no candiate model-->
        <div
            ng-if="candidate.phones" <!--Prevent rendering if canidate doesn't have phones param-->
            ng-repeat="phone in candidate.phones"
            style="position:relative"
        >
            -- write out some value
        </div>

        <div class="small-12">
            <label>first name
            </label>
            <input name="firstName" type="text"/>

            <div
                ng-if="candidate.email"
                ng-repeat="phone in candidate.email"
                style="position:relative"
            >
                -- write out some value
            </div>
        </div>

        <div class="apply-bar">
            <button class="button button-apply" type="submit">
                apply
            </button>
        </div>
    </div>
</form>

加载所有内容后，显示具有多个ng-repeat的表单

3 个答案: