My goal is to create a dropdown menu in Angular that automatically removes the current page from the list when navigating to another view. I want the menu to reset and remove the now-current view every time a new view is loaded.
This is the array of objects that forms the dropdown menu:
var menuItems = [
{menuItem: 'home', url: '/'},
{menuItem: 'depth', url: '/depth'},
{menuItem: 'bolt circle', url: '/bolt_circle'}
];
Here's the Angular function that sorts the array and slices out the current page:
$scope.sort = function(){
$scope.items = menuItems;
for(i=$scope.items.length-1; i>=0; i--){
var obj = $scope.items[i];
if($location.path() === obj.url){
$scope.items.splice(i, 1);
}
}
I'm relatively new to Angular and JavaScript, so I'm unsure why `menuItems` seems to be getting spliced along with `$scope.items`. Every time I navigate to a page, it gets removed from the menu until there are no links left. I thought creating a copy of the array each time the `sort()` function runs would provide a fresh array copy. I hope I've explained that clearly enough.