How to use the child element's attrs in ngShow?

Question

I wanna check if an element's child has a class name in it's ngShow directive like

<div ng-show="check here if the child img has class name 'active'">
    <img class="...">
</div>

How to do it?

EDIT

What i did try so far is writing a function for it like those

<div ng-show="test(this)">....

<div ng-show="test($event)">....

And when i apply console.log for those parameters in test function i have some object that i didnt understand what it stands for for this and i have undefined for $event which i know i can use in ng-click but obviously not here.

Answer 1

I think it would be worth it to take a look at “Thinking in AngularJS” if I have a jQuery background?

However, to answer your question,

• I created an example PLNKR
  • It answers your original question, before you changed it to checking if the element's child has the class.
  • However, the same principles apply, so I'll provide my answer.
• It is worth noting that it's probably better practice to accomplish this using a directive.
• EDIT: I'd also like to second @charlietfl's comment. I think you may be approaching this issue backwards.

That being said, here is one solution:

HTML

<!-- remove 'active' from class, and element is no longer shown -->
<div id="special" ng-show="showElem" class="active">ACTIVE</div>

JS (Controller)

// get the element we want to test
var elem = angular.element(document.querySelector('#special'));
// check if that element has the class 'active'
$scope.showElem = elem.hasClass('active');  // true or false

---

Another way to do it would be:

<div id="special" ng-show="elem.hasClass('active');" class="active">ACTIVE</div>

and

$scope.elem = angular.element(document.querySelector('#special'));

---

Resources

• AngularJS documentation for:
  • angular.element
  • ngShow
• Relevant SO Questions
  • AngularJS - Find Element by Attribute Value
  • How to check if element has class with AngularJS?