HTML стал «рваным» и нечитабельным после использования Angular JS. Что я делаю не так?

Предположим, что есть такой кусок кода (см ниже).
Он хорошо работает, но читается ужасно из-за слишком большого количества HTML атрибутов, нужных для Angular.
Все, что делает - это позволяет добавлять несколько номеров телефнов для клиента. Блоков с аналогичным функционалом в моей форме с десяток, и с десяток попроще. В результате получается гигантская нечитаемая мешанина.

Можно ли это как-то исправить?

<div class="form-group">
  <label class="col-md-2 control-label">
    Телефон:
  </label>
  <div class="col-md-10 row order-data-inputs">
    <div class="col-md-6" ng:repeat="phone in order.data.clientPhoneNumbers" >
      <div ng:class="{'input-group': !phone.id}">
        <p ng:if="phone.id" class="form-control-static">{{ phone.value }}</p>

        <input
            ng:if="!phone.id"
            ng:selection="!phone.id"
            ng:tel
            ng:model="phone.value"
            type="text"
            placeholder="+7 (925) 555-55-55"
            name="phone"
            class="form-control input-sm"
            />
            <span class="input-group-btn">
              <a
                  ng:if="!phone.id"
                  ng:click="order.data.clientPhoneNumbers.splice($index, 1)"
                  class="btn btn-danger btn-sm"
                  href=""
                  >
                <i class="fa fa-times"></i> Удалить
              </a>
            </span>
      </div><!-- /input-group -->
    </div><!-- /col-md-2 -->
    <div
        class="col-md-3"
        ng:show="!order.data.clientPhoneNumbers.last() || order.data.clientPhoneNumbers.last().value">
      <a ng:click="dataAdd('phone')" class="btn btn-default btn-sm" href=""><i class="fa fa-plus-sign"></i> Добавить</a>
    </div>
  </div> <!--/order-data-inputs-->
</div>
  • Вопрос задан
  • 3163 просмотра
Пригласить эксперта
Ответы на вопрос 2
kompi
@kompi
nullstack devoops
Возможно, имеет смысл перегруженные тэги выносить в кастомные директивы.
Ответ написан
Да ничего тут особо не поделаешь. Можно добавить контроллеров и вытащить сложные выражения в функции, чтобы вместо
!order.data.clientPhoneNumbers.last() || order.data.clientPhoneNumbers.last().value

писать просто
afterLastPhone()

Если всё ещё режет глаз - вытаскивайте код в шаблоны. Тот же принцип рефакторинга, что применяется в обычном коде: разделять большие функции на множество маленьких. Читаемость должна повыситься.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы