How to use AngularJS ng-Class condition based on another element's class?

Question

<div id="parent" ng-class="{testClass:???}">
   <span id="child" class="test"/>
</div>

On this example, how would I do it so that if element child would have a class test, the parent element would dynamically have the class testClass?

Answer 1

You can create a scope variable to validate whether those 2 elements should be visible or not. The inner span too should be getting set dynamically according to your description. So you can use ng-class for that too. So the code can be like this :

<div id="parent" ng-class="{testClass : isValid}">
    <span id="child" ng-class="{test : isValid}"/>
</div>

Answer 2

You can add the ternary condition within the ng-class like

var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">

and put in your css file the classes

.class-if-true{color=black}
.class-if-false{color=white}