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?

Do you control the class of the child? I mean its obviously dynamic in some form but if its not set with ng-class how is it set? — ste2425
– ste2425, Commented Dec 15, 2015 at 8:15

Adarsh Konchady · Accepted Answer · 2015-12-15 08:23:45Z

3

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>

edited Dec 15, 2015 at 8:23

answered Dec 15, 2015 at 8:18

Adarsh Konchady

2,7375 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Franz Gastring · Accepted Answer · 2016-12-21 18:11:38Z

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}

answered Dec 21, 2016 at 18:11

Franz Gastring

1,1222 gold badges15 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related