How to delete the last item of an array in AngularJS using scope

Question

How to delete the last item of an array in AngularJS using scope

In my Angular controller, I have an array and a method for deleting objects.

function($scope, $http){
    $scope.arrayOfObjects = [];
    $scope.remove = function(obj){
        var i = $scope.arrayOfObjects.indexOf(obj);
        if( i > -1 ){
            $scope.arrayOfObjects.splice(i, 1);
        }
    }
// Additional code here
}

HTML

<a href ng-repeat="(key, obj) in arrayOfObjects track by $index">{{obj.id}}

<button type="button" role="button" class="btn btn-default" ng-click="remove(obj)">
   <i class="fa fa-trash"></i>
   <span>Delete</span>
</button>

</a>

Everything works fine when deleting objects except for the last one. When the user tries to delete the last object, the page redirects to localhost:3000/# which results in a blank page. Has anyone else experienced this issue?

javascript angularjs

Answer 1

Answer №1

While some of the other responses are focused on addressing your issue with the link/redirect problem, which can be resolved by avoiding having additional clickable elements inside an anchor tag, the main issue lies in using incorrect syntax for iterating through array objects.

To properly iterate over an array, you should use this format:

ng-repeat="obj in arrayOfObjects"

The syntax you are currently using is meant for iterating over the properties of a single object. In this case, key and value are the arguments passed to your repeater function.

ng-repeat="(key, value) in object"

It seems like what you actually need is something along these lines:

<div ng-repeat="obj in arrayOfObjects">
  {{obj.id}}
  <button ng-click="remove(obj)">Delete</button>
</div>

Check out the codepen example here

Answer 2

While some of the other responses are focused on addressing your issue with the link/redirect problem, which can be resolved by avoiding having additional clickable elements inside an anchor tag, the main issue lies in using incorrect syntax for iterating through array objects.

To properly iterate over an array, you should use this format:

ng-repeat="obj in arrayOfObjects"

The syntax you are currently using is meant for iterating over the properties of a single object. In this case, key and value are the arguments passed to your repeater function.

ng-repeat="(key, value) in object"

It seems like what you actually need is something along these lines:

<div ng-repeat="obj in arrayOfObjects">
  {{obj.id}}
  <button ng-click="remove(obj)">Delete</button>
</div>

Check out the codepen example here

Answer 3

Answer №2

If you need to filter and return specific items back to the original scope, you can achieve this using the 'filter' function as shown below:

        $scope.remove = function (objs) {
            $scope.objs = objs.filter(function (obj) {
               //Specify the condition to remove unwanted items
               return obj;
            });
        };

Here is the HTML component for triggering the removal:

    <button class="btn btn-danger btn-block" ng-click="remove(objs)">Delete</button>

Answer 4

If you need to filter and return specific items back to the original scope, you can achieve this using the 'filter' function as shown below:

        $scope.remove = function (objs) {
            $scope.objs = objs.filter(function (obj) {
               //Specify the condition to remove unwanted items
               return obj;
            });
        };

Here is the HTML component for triggering the removal:

    <button class="btn btn-danger btn-block" ng-click="remove(objs)">Delete</button>

Answer 5

Answer №3

To remove the last element from an array in AngularJS, you can use the pop() method which not only removes the element but also returns it. An example of this would be $scope.arrayOfObjects.pop()

angular.module('app', [])
.controller('mycontroller', function($scope) {
  $scope.arrayOfObjects = [{ id: 1 }, { id: 2 }, { id: 3 }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mycontroller">
  <button ng-click="arrayOfObjects.pop()">remove in inline</button>
  <ul>
    <li ng-repeat="myobj in arrayOfObjects">{{myobj.id}}</li>
  </ul>
</div>

Answer 6

To remove the last element from an array in AngularJS, you can use the pop() method which not only removes the element but also returns it. An example of this would be $scope.arrayOfObjects.pop()

angular.module('app', [])
.controller('mycontroller', function($scope) {
  $scope.arrayOfObjects = [{ id: 1 }, { id: 2 }, { id: 3 }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mycontroller">
  <button ng-click="arrayOfObjects.pop()">remove in inline</button>
  <ul>
    <li ng-repeat="myobj in arrayOfObjects">{{myobj.id}}</li>
  </ul>
</div>

How to delete the last item of an array in AngularJS using scope

Answer №1

Answer №2

Answer №3

Similar questions

Encountering issue - SCRIPT5022: Error parsing message from server in Sys.WebForms.PageRequestManagerParserErrorException

Deeply nested .map function to update state value

Incorporate the ng2-ace library into a newly generated Angular-CLI (Angular2) project with the help of SystemJS

Having trouble passing input values from the view to the controller in Angular?

Unable to modify the value of an object variable generated from a query in JavaScript, ExpressJS, and MongoDB

processing an array using ajax form submission

The Upstash Redis scan operation

Guide to automatically updating a table with AJAX requests

Are you utilizing Google Chrome extensions for importing and exporting JSON files?

When a td element is clicked, the Textbox will also be clicked

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

Testing XMLHttpRequest with Jasmine: A Complete Guide

Display the number in a formatted manner without displaying any zeros in the decimal part

Inquiries prior to projecting rays

Is there a way to retrieve JSON data from a specific URL and assign it to a constant variable in a React application?

Ways to enhance multiple ng-repeats efficiently with css grid

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

displaying HTML content in an Angular controller

Extracting information from a Weather API and sharing it on Twitter

I'm facing an issue with SSRProvider in my NextJs application