S
S
Sergey2013-12-09 03:56:28
Angular
Sergey, 2013-12-09 03:56:28

HTML became "ragged" and unreadable after using Angular JS. What am I doing wrong?

Suppose there is such a piece of code (see below).
It works well but reads horribly due to too many HTML attributes required by Angular.
All it does is allow you to add multiple phone numbers for a client. There are a dozen blocks with similar functionality in my form, and a dozen simpler ones. The result is a giant unreadable mess.
Can this be fixed somehow?

<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>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
K
kompi, 2013-12-09
@kompi

Perhaps it makes sense to put overloaded tags into custom directives.

R
Ruslan Lopatin, 2013-12-09
@lorus

Yeah, there's not much you can do about it. You can add controllers and pull complex expressions into functions so that instead of
it's easy to write
If it still hurts your eyes - pull the code into templates. The same refactoring principle that applies to normal code: split large functions into many small ones. Readability should improve.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question