Attempting to eliminate an li from a ul using angular. Although the element is successfully removed from the array, AngularJS does not remove the li until it is interacted with, such as being hovered over or clicked. See the code below:
app.js
myApp.run(function($rootScope, appAPIservice){
appAPIservice.getInterests().success(function (response) {
$rootScope.interests = [];
if (response.data) {
var interests = response.data;
for (var i = 0; i < interests.length; i++) {
$rootScope.interests.push(interests[i]));
}
}
});
});
index.html
<ul ng-controller="interestsController">
<li ng-repeat="interest in interests">
<a href="#{{interest.link}}">{{interest.parentName}} / {{interest.childName}}</a>
<button ng-click="deleteInterest($index)"></button>
</li>
</ul>
controllers.js: Contains the deleteInterest function
myApp.controller('interestsController', function($scope) {
$scope.deleteInterest = function(arrayIndex) {
$scope.interests.splice(arrayIndex, 1);
});
}
});
When the page loads, the following is displayed:
<ul class="ng-scope" ng-controller="interestsController">
<li class="ng-scope" ng-repeat="interest in interests">
<a href="#/other-link class="ng-binding">Other Parent/Other Child</a>
<button ng-click="deleteInterest($index)"><i class="icon-close"></i></button>
</li>
</ul>
The issue arises when clicking the deleteInterest() button. The list item gains the following classes: ng-animate, ng-leave, ng-leave-active. Unfortunately, the item will not be removed from the list until it is hovered over. Only then is it successfully removed from the DOM.
<li class="ng-scope ng-animate ng-leave ng-leave-active" ng-repeat="interest in interests">
<a href="#/some-link" class="ng-binding">Some Parent / Some Child </a>
<button ng-click="deleteInterest($index)"><i class="icon-close"></i></button>
</li>
Attempts have been made to resolve this issue by wrapping
$scope.interests.splice(arrayIndex, 1);$scope.$apply(function(){
$scope.interests.splice(arrayIndex, 1);
});
However, an error message stating that $scope.$digest is already in progress is received.
Is there a method to compel AngularJS to remove all ng-leave elements?