Count all divs in a component having 'ng-show' attribute

Question

I have a component <row/> containing multiple <cell/> components.

Some of the cells have ng-hide attr and some cells have a keyword 'mutate' :

<row>
   <cell> </cell>
   <cell ng-hide = "cond"> </cell>
   <cell mutate> </cell>
</row>

Using $element.find("cell"), I'm able to get the count of all <cell/> within a <row/>. But, I want to find the the number of cells with "mutate" attr or number of cells with "ng-hide" attr. Finding either will do.

Can someone please help me out here?

Answer 1

The idea behind angular (and angularjs) is the HTML mirrors the data structure(s). Rather than count HTML elements to find out how many are hidden with ng-hide='cond', you would just query the data structure, maybe something like

let cond='foobar', numHides = $scope.dataArray.filter(f => f.cond == cond).length;
console.log(numHides);

However, angularjs does have an element method, so you could do a direct DOM element count, once you're sure your data has parsed into the HTML:

let numMutates = angular.element(document.querySelectorAll('[mutate]'));