Answer the question
In order to leave comments, you need to log in
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
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 questionAsk a Question
731 491 924 answers to any question