How to mix ngClass Map Syntax and Boolean Operators

Question

How can I use ngClass map syntax with the && and ! boolean operators?

<div class="tbTileContent"
    ng-class=  
    "{'highlight': ((obj.Count == 1 &&  
         setActionType != 1 && setActionType != 20 )},[obj.BackgroundColor,obj.ColumnColor]">

Does not work. Is this possible some other way?

Perhaps copy your div to an angular page and see what happens? — Jan Peter, Jun 29 '15 at 11:43
Your code does not look syntactically correct, with 2 `((` but 1 `)` — New Alexandria, Jan 22 '16 at 22:43
Possible duplicate of [How to get evaluated attributes inside a custom directive](http://stackoverflow.com/questions/12371159/how-to-get-evaluated-attributes-inside-a-custom-directive) — New Alexandria, Jan 29 '16 at 14:34

Paul Sweatte · Answer 1 · 2016-09-27T17:32:59.097

Use equality checks with reference to the rootScope to simplify debugging, and use the developer tool to check CSS specificity:

.foo { color: red; }
.bar { color: blue; }
.baz { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script>
  function bar($rootScope)
    {
    $rootScope.conditionA = true;
    $rootScope.conditionB = function() { return true; };
    }
  
  angular.module('foo',[]);
  angular.module('foo').run(bar);
</script>
<div ng-app="foo">
  <div class="existing" ng-class="{baz: conditionA && conditionB(), foo: conditionA, bar: conditionB()}">
    Hi
  </div>
</div>

Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the services have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.

References

How to mix ngClass Map Syntax and Boolean Operators

1 Answers1