Angular.element selector with some exceptions

Question

I have this simple structure:

<div class="outer-div">
    <div class="inner-div-1">inner div 1</div>
    <div class="inner-div-2">inner div 2</div>
    <div class="inner-div-3">inner div 3</div>
    <div class="inner-div-4">inner div 4</div>
  </div>

Trying to select all the inner divs but the second one. Using angular.element('div', '.outer-div') will select each div. I need to select only the 1st, 3rd and 4th. Is there a simple way to do this, preferably using a single angular.element?

Here is an example: https://codepen.io/neptune01/pen/ppBrKY?editors=1111

Answer 1

You could consider something like below, but its highly discourage to do DOM manipulation from angular controller. I'd recommend to create directive for the same.

var childs = angular.element('.outer-div').children();
colorElementExclude([1], childs);

function colorElementExclude(excludedElement, childrens){
  //add exclude class on element to be excluded
  excludedElement.forEach(function(el) {
    childrens.eq(el).addClass('exclude');
  });
  childrens.not(".exclude").css({ 'color': 'grey' });
}

Forked Codepen