Показать форму с несколькими ng-repeat после загрузки всего содержимого

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 в вашем div:

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

Answer 2

Есть два способа справиться с этим.

1. Вы инициализируете свою модель (кандидат) с пустым массивом телефонов / электронной почты.В этом случае вам не нужно ничего делать в шаблоне, поскольку ng-repeat будет применяться 0 раза.В результате ничего не отображается.
2. Вы используете 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>

Answer 3

используйте ng-if, чтобы проверить, были ли загружены элементы массива.

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