Sort alphabetically whilst simultaneously tracking by $index in a Custom Property Editor | Umbraco | Page 1

violet iris · 2023-11-08T09:33:53.772Z

Hey Umbraco Friends 🙂 I'm currently working with a Custom Property Editor that involves Block Groups, each containing a title and a collection of value rows, essentially representing key-value pairs. This data is structured as an array of objects. In my custom view, I'm using ng-repeat to display these Block Groups. Initially, I was tracking them by $index for CRUD operations. However, I've now switched to using orderBy: "title" to enable alphabetical sorting. Unfortunately, this adjustment has affected my existing logic. For instance, when deleting a Block Group by index, clicking "delete" on one Block Group results in the deletion of another. This becomes especially evident when attempting to delete the last Block Group (the one appearing last in alphabetical order), as it ends up deleting the most recently created Block Group (with the highest index). Ideally, I would like to sort them alphabetically by their titles, at least from a visual standpoint, to facilitate easier navigation. So here's my (perhaps not so straightforward) question: Is it feasible to simultaneously track by $index in ng-repeat while displaying Block Groups in alphabetical order? If this is possible, could you guide me on how to achieve it? Any help is greatly appreciated!

Hello @violet iris

It's definitely possible to display items in an ng-repeat in alphabetical order while still being able to track them by their original index for CRUD operations. You can achieve this by using a combination of AngularJS features. Here's a basic outline of how to do it:

Sort the Data Array: First, you should sort your array of Block Groups by their titles before rendering it in ng-repeat. This ensures that they are displayed in alphabetical order. You can do this in your controller or as a filter.

$scope.sortedBlockGroups = $filter('orderBy')($scope.blockGroups, 'title');

Display Sorted Data in ng-repeat: In your HTML, use the sorted array in ng-repeat.

Track by Original Index: To handle CRUD operations, you can continue to track by the original index. You can achieve this by maintaining a mapping of the original index to the sorted index. This allows you to keep track of the correct Block Group when performing CRUD operations.

// Create a mapping from original index to sorted index
$scope.indexMapping = {};
angular.forEach($scope.blockGroups, function (blockGroup, originalIndex) {
$scope.indexMapping[originalIndex] = $scope.sortedBlockGroups.indexOf(blockGroup);
});

// Use the mapping for CRUD operations
$scope.deleteBlockGroup = function (originalIndex) {
var sortedIndex = $scope.indexMapping[originalIndex];
$scope.sortedBlockGroups.splice(sortedIndex, 1);
// Perform the delete operation on the original data array as well.
$scope.blockGroups.splice(originalIndex, 1);
};

With this approach, you maintain a sorted display while still having the ability to perform CRUD operations based on the original index of the Block Groups. The indexMapping object keeps track of the relationship between the original and sorted indices, allowing you to perform operations on the original data array correctly.

I wish that helps.

#Sort alphabetically whilst simultaneously tracking by $index in a Custom Property Editor