在ng-repeat上的模型之间过渡

Question

I'm building a directive (Angular 1.2) that will toggle between displaying two different lists - think of them as a list of "trending" items on the site and a list of items the user is "following". So we have a toggle that allows the user to choose which list is being displayed, with an ng-repeat below it showing the items.

There will be a good deal of overlap between these lists, and when the user toggles from one list to the other, I'd like items that are contained in both to transition from their places on the "outgoing" list to their places on the new one, rather than disappearing and reappearing.

My question isn't about how to achieve the actual animations (we're using ngAnimate ), but about how I should structure the controller/data to. I'm thinking about my directive controller having a trendingList and a followingList (that contain the actual data items), and an activeList that points to whichever of the two are currently being displayed. So the ng-repeat is actually on activeList , and toggling is essentially:

$scope.toggleMode = function(){
    if ($scope.mode == 'trending') 
        $scope.mode = following; 
        $scope.activeList = followingList;
    else {/*the inverse...*/}
}

Is that the most reasonable approach? If so, how do I ensure that angular recognizes the equality of objects present in both lists?

Or is there an easier/cleaner way to do this?

Answer 1

From what I understand, angular isn't tracking the equality of objects in the list it is repeating. The animations are triggered when the DOM is manipulated, not when the data changes (though data changes will change the DOM). As to what you should do, I don't have experience with this problem so hopefully somebody can point you in the right direction!