Splice removing wrong object of ng-repeat in AngularJS

Question

I want to use $scope.posts.splice(post, 1); to remove an object (post) of an ng-repeat.

When I click on the delete button, the wrong post gets deleted (always the first one). When I refresh the browser, the right post was deleted (api delete function works).

HTML:

<div ng-repeat="post in posts | orderBy: '-upvotes'">
  <md-button class="md-icon-button md-accent" aria-label="Vote-Up" ng-click="incrementUpvotes(post)">
    <i class="material-icons">thumb_up</i>
  </md-button>
  {{post.upvotes}}
  <span style="font-size:20px; margin-left:10px;">
    <a ng-show="post.link" href="{{post.link}}">
      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
  </span>
  <span>
    posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a>
  <span>
    <a href="#/posts/{{post.id}}">Comments</a>
    <a href="#" ng-click="deletePost(post)">Delete</a>
  </span>
</div>

JS:

angular.module('crud')
.controller('MainCtrl', [
'$scope',
'posts',
'ToastService',

function($scope, posts, ToastService){

  $scope.posts = posts.posts;

  // Delete Post
  $scope.deletePost = function(post){
    if(window.confirm('Are you sure?')) {
      posts.delete(post).then(function () {
        $scope.posts.splice(post, 1);
        ToastService.show('Post deleted');
      });
    }
  };

Why does splice remove the wrong post of ng-repeat?

see plnkr.co/edit/qPK2QskXJMed2MXVt5vK?p=preview

Fracedo
– Fracedo

2015-10-07 18:56:51 +00:00
Commented Oct 7, 2015 at 18:56 — Fracedo
– Fracedo, Commented Oct 7, 2015 at 18:56

dave · Accepted Answer · 2015-10-07 18:56:17Z

2

Because splice takes the index of the element to delete, not the element itself. You should be able to use indexOf with it to make it work:

$scope.posts.splice($scope.posts.indexOf(post), 1);

answered Oct 7, 2015 at 18:56

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dave Over a year ago

it will find the object with the same reference

Alessandro Santamaria Over a year ago

yes $scope.posts.splice($scope.posts.indexOf(post), 1); this works perfectly, thank you.

CMR · Accepted Answer · 2015-10-07 18:56:11Z

0

You can get the index by passing $index in your function. Its described in the ngRepeat Docs.

<a href="#" ng-click="deletePost($index)">Delete</a>

answered Oct 7, 2015 at 18:56

CMR

9331 gold badge7 silver badges8 bronze badges

Collectives™ on Stack Overflow

Splice removing wrong object of ng-repeat in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related