CODEWITHSUNDEEP
javascriptangularjs
RPiAwesomeness
RPiAwesomeness

Reputation: 5159

Remove all elements within a ng-repeat in Angular

I'm working with Angular and part of my page utilizes ng-repeat to display some bug tracker tickets. As part of the site, I also want to provide the ability to search tickets. I'm able to get that part working as I want, and if I'm just appending new tickets they show up fine.

However I would like to be able to, if a user searches, delete all of the currently visible ticket divs and replace them with the search results.

My initial thinking, since I have the ng-repeat set as item in tickets track by item.id, was to just set $scope.tickets equal to the new data. However, this didn't cause Angular to update the DOM.

So, I tried setting $scope.tickets equal to an empty array and then setting it equal to the new data:

$scope.$apply(function() {
    $scope.tickets = [];

    $scope.tickets = data;
});

Still no update to the DOM, even though console.log($scope.tickets) shows the correct objects.

I'm aware of the method of

$scope.$apply(function() {
    array.splice(index, 1);
});

to remove individual elements, but I'm not sure how I would apply that removing all of the elements.

I'll try and get a Plunkr or JSBin added to the Q soon.

What would be the proper way for me to make Angular replace all of the current elements with the new elements created from the data?

Upvotes: 1

Views: 929

Answers (2)

Atef Ben Ali
Atef Ben Ali

Reputation: 93

Did you test $watch?

$scope.$watch('tickets', function() {
   // update data HERE
});

Upvotes: 0

Luke
Luke

Reputation: 8407

try setting array.length = 0 this deletes all elements, while not removing the reference to the array, which actually seems to be the problem in your case.

but another way would be to have a additional data bag.

for example have $scope.data.tickets then you can reasign tickets as usual. important thing is, you have to reference your items using item in data.tickets

Upvotes: 2

Related Questions