Angular not updating dom after array splice

Question

I have a controller which has the test array and I have added 2 objects to it. When I call delete function from html ng-click, the array is not updated in dom but I can see that the array being spliced in js code. I have tried $apply(), but that does not work as it says it is already applied.

app.controller('HomeCtrl', ['$rootScope', '$scope', function($rootScope, $scope) {

    var person1 = {firstName:"John", lastName:"Doe", age:46}; 
    var person2 = {firstName:"Joe", lastName:"Horn", age:66}; 
    $scope.test = []; 
    $scope.test.push(person1);
    $scope.test.push(person2);

    $scope.deletePost = function(value, post){       
            $scope.test.splice(0, 1);
    }
}]);

HTML:

<div class="row" ng-controller="HomeCtrl">
 <div ng-repeat="tes in test">{{tes.age}}<br></div>
</div>
 <a data-toggle="modal" ng-click="deletePost(value, post)" data-target="#deleteModal"  ng-show="post.user.email == user.email" style="font-size:15px;margin-left: 1rem;" class="card-link" href="javascript:void(0)">Delete</a>

your code seems to work Perfectly. Check this plunker based on your code. plnkr.co/edit/w1QZ4OkaEHTKg3TSSBcH?p=preview — Deep
– Deep, Commented Jun 13, 2016 at 15:30
@Deep The original code is very large to be posted here, i guess there is some other problem. — shashank
– shashank, Commented Jun 13, 2016 at 15:33

Ohjay44 · Accepted Answer · 2016-06-13 15:41:52Z

1

You need to rearrange your dom and you also should splice based on index.

Try:

DOM :

<div class="row" ng-controller="HomeCtrl">
 <div ng-repeat="tes in test track by $index">{{tes.age}}<br></div>
 <a data-toggle="modal" ng-click="deletePost($index, tes)" data-target="#deleteModal"  ng-show="post.user.email == user.email" style="font-size:15px;margin-left: 1rem;" class="card-link" href="javascript:void(0)">Delete</a>
</div>

Controller:

app.controller('HomeCtrl', ['$rootScope', '$scope', function($rootScope, $scope) {

    $scope.test = [{firstName:"John", lastName:"Doe", age:46}, {firstName:"Joe", lastName:"Horn", age:66}]; 

    $scope.deletePost = function(ind, post){       
            $scope.test.splice(ind, 1);
    }
}]);

answered Jun 13, 2016 at 15:41

Ohjay44

8977 silver badges20 bronze badges

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

Comments

Łukasz · Accepted Answer · 2016-06-13 15:42:59Z

0

Move <a> inside element which has your controller attached.

<div class="row" ng-controller="HomeCtrl">
 <div ng-repeat="tes in test">{{tes.age}}<br></div>
 <a data-toggle="modal" ng-click="deletePost(post, value)" data-target="#deleteModal"  ng-show="post.user.email == user.email" style="font-size:15px;margin-left: 1rem;" class="card-link" href="javascript:void(0)">Delete</a>
</div>

edited Jun 13, 2016 at 15:42

answered Jun 13, 2016 at 15:37

Łukasz

2,1711 gold badge15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular not updating dom after array splice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related