I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this:
Actually, the circle consists of two classes: .circle and .loader. Within the circle ...
<div ng-hide="lineItems.length" class="circle">
<div class="loader"></div>
</div>
As you can see below, there is a promise with an if statement which checks if lineItems.length is zero, then it shows myModal. Everything works fine, but the loading circle still appears. What I want to do is completely remove the .circle and .loader once the condition inside the if is met.
.then(function(lines) {
$scope.lineItems = lines;
if ($scope.lineItems.length === 0) {
myModal.show();
console.log('I AM EMPTY');
} else {
loaderAlert.hide();
}
}
Someone suggested using an $scope variable, but I'm not sure how to implement that as I am new to Angular. Are there any other ways to achieve this?