陣列拼接后角度不更新dom

Question

我有一個具有測試數組的控制器，並向其中添加了2個對象。 當我從html ng-click調用delete函數時，該數組未在dom中更新，但我可以看到該數組已在js代碼中進行拼接。 我試過$ apply（），但是它說已經應用了，所以不起作用。

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>

Answer 1

您需要重新排列dom，並且還應該基於索引進行拼接。

嘗試：

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>

控制器：

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);
    }
}]);

Answer 2

將<a>移動到已連接控制器的元素內。

<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>