fa fa-icons in ng-class with ternary operator (Angular.Js 1.x)?

Question

May be my this SO not clear, so again trying to ask what i really want(forgive,if its still not clear).

Trying to reduce multiple html snippets into single line. Actual blocks looks like below (having more than 8 columns like below)

<div class="spanHolder">
    <span ng-click="reOrderTbl('marchendId', asd)">data.columnName</span>
    <span ng-hide="presentHeader != previousHeader || presentHeader =='itemID'"><i class="fa fa-thumbs-up"></i></span>
    <span ng-show="alterTblType && presentHeader=='itemID'"><i class="fa fa-thumbs-down" ></span>
    <span ng-show="(!alterTblType && presentHeader=='itemID')"><i class="fa fa-thumbs-up" ></span>
</div>

So altering into

<div class="spanHolder">
    <span>data.columnName</span>
    <span ng-click="reOrderTbl('marchendId', asd)"
    ng-class = "(presentHeader != previousHeader || presentHeader =='itemID') ? 'fa fa-thumbs-up' : 
    (alterTblType && presentHeader=='itemID') ? 'fa fa-thumbs-down' : 
    (!alterTblType && presentHeader=='itemID') ? 'fa fa-thumbs-up' : ''" >
</span>
</div>

however its not working and also not throwing any errors, not showing icons as well

Reason: in actual snippet I don't want columnName to be clickable, instead i want to do that on fa-Icons to reorder the table

Could someone tell me how to achieve this cleaner and better way.?

Thanks to all

Answer 1

ng-class using the ternary operator should be formatted like below

ng-class="variableToEvaluate ? 'class-if-true' : 'class-if-false'">

So you need to do all your evaluations in the first part of the statement, then apply classes appropriately.

Answer 2

I would say the brackets are wrong. But it is very hard-to-read ternary operator.

To get better insight about the logic, you can rewrite this ternary logic into a method in controller. Like following:

function getFaIcon(presentHeader, previousHeader) {
  var result = '';
  if (presentHeader != previousHeader || presentHeader =='itemID') {
    result = 'fa fa-thumbs-up';
  } else {
    if (alterTblType && presentHeader=='itemID') {
      result = 'fa fa-thumbs-down';
    } else if (!alterTblType && presentHeader=='itemID') {
      result = 'fa fa-thumbs-up';
    }
  }

  return result;
}

It can also be simplified because in two cases you return the same value 'fa fa-thumbs-up' .

Also when it is a method, you can but some caching to the method results, which might be extremly useful to speed the digest cycle up.

You can debug it and realize what's the actual problem there.

In your HTML you call it like this:

ng-class="getFaIcon(presentHeader, previousHeader)">

Answer 3

Maybe you can use something like this:

<span ng-class="{'classname' : condition}"></span>

For example:

<span ng-class="{'icon1-class': obj.value1 == 'someothervalue' || obj.value2 == 'other-class'}"></span>