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

Configuring a Meteor.js application requires defining variable scopes for templates in order to manage

Looking for assistance with implementing a jQuery function for an onClick event on

Remove elements from an array based on the indices provided in a separate array

Ensure that you patiently wait for the axios method to finish execution before moving on to the

Uploading images in React JS by allowing users to paste images

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Using CloudantDB and NodeJS to retrieve data based on specific id

When certain triggers are activated, a hidden textbox revealed through javascript is made visible

Click twice on the editable AngularJS table to wrap each item

Instructions for utilizing lodash or JavaScript to apply a filter to an object

When utilizing the http.post method, the req.body is not being populated as expected

I am looking to implement a feature that will disable unchecked checkboxes based on certain conditions in a

Troubleshooting: Directives in Angular 4 not recognizing RegEx patterns

Error: Required variable missing in AJAX Post request

"Executing a query on Angular Firestore using the where clause fetches all documents from the

Determine if a file input is linked in React.js Material UI

The HttpParams are reluctant to be established

Looking to update the key name in a script that produces a list sorted in ascending order

Error: The function .default.auth.signout is not recognized in the REACT and Firebase environment

Unexpected lag causing delays in jQuery animations