This is a cross-post from StackOverflow, but I'm afraid it might be too
subjective and will get deleted.
Anyway, I need some guidelines on how to produce clean mark-up when using
Angular conditionals.
On my team, I'm the go-to CSS guy. Sometimes I get mark-up that's much more
complex and nested than it needs to be, and I take it upon myself to clean
it up.
For example, I just re-factored the following mark-up from this:
<div ng-show="isGroupingActive()">
<div style="padding-left: {[{ getPadding(row) }]}px;">
<div ng-show="row.children"
ng-click="showHideGroup(row)">
<div ng-switch on="row.expanded">
<div ng-switch-when="true">+</div>
<div ng-switch-when="false">-</div>
</div>
</div>
<div ng-hide="row.children">
.
</div>
</div></div>
To this:
<div ng-if="row.children && row.expanded"
ng-click="showHideGroup(row)"
style="padding-left: {[{ getPadding(row) }]}px;">-</div>
<div ng-if="row.children && !row.expanded"
ng-click="showHideGroup(row)"
style="padding-left: {[{ getPadding(row) }]}px;">+</div>
<div ng-if="!row.children"
style="padding-left: {[{ getPadding(row) }]}px;">.</div>
I much prefer the single DOM element produced by version 2 over the
unnecessary complexity of the nested DOM in the original. Further, I think
this logic is far more readable and maintainable.
Comparing the two versions, it occurred to me that my colleague was writing
HTML the same way he might write the conditionals in JavaScript (where he
is more comfortable). He was observing DRY principles. Notice how my
version repeats itself a few times. If we were to add more conditions, we'd
have to repeat ourselves some more. Still, version 2 yields much cleaner,
simpler HTML.
So my question: How do you react to my revision, and what is the best
approach to this problem?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
