I've noticed how cluttered and unreadable the HTML pages get when certain elements on the DOM need various conditional classes with Angular.
Something like this:
<div>This is a Message.</div>
easily becomes this:
<div ng-class="{'red': vm.isRed, 'bold': vm.isBold, 'big': vm.isBig, 'underline': vm.isUnderline}">This is a Message.</div>
or something bigger. What I wanted to ask is if there is any common practice to exclude this kind of logic from the HTML?
Something like this perhaps:
<div ng-class="objectClass">This is a Message.</div>
and having this on the controller:
vm.isRed = true;
vm.isBold = true;
vm.isBig = true;
vm.isUnderline = false;
vm.objectClass = {
'red': vm.isRed,
'bold': vm.isBold,
'big': vm.isBig,
'underline': vm.isUnderline,
};