I have a setup for an HTTP request that will return the list of products once all promises are fulfilled.
My objective is to initially set the opacity of these products to 0, and then use a forEach loop to add a class that sets their opacity to 1.
While my current code works with the 'ul' element, I am facing issues with applying it to the child elements.
This is the snippet from my promise:
angular.forEach(angular.element(document.querySelector('.product-list')), function(value, key){
var a = angular.element(value);
a.addClass("loaded");
});
However, no matter how I manipulate '.product-list li', I can't seem to make it work.
Any suggestions?
An example of the HTML structure:
<ul class="product-list">
<li>item 1</li>
<li>Item 2</li>
<li>item 1</li>
<li>Item 2</li>
</ul>
And the CSS:
.product-list {
li {
opacity: 0;
&.loaded {
opacity: 1;
}
}
}
I will also include a timeout in the forEach loop.