Как удалить элемент с угловым элементом в DOM

Question

Я столкнулся с этой стеной. Это моя функция удаления из моего mainController.

$scope.delete = function($posts) { 
    $http.delete('/api/posts/' + $posts._id) 
     .success(function(data) { 
      // delete element from DOM 
      // on success I want to delete the post I'm clicking on. 
     }); 

И вот шаблон, в котором я загружаю свои данные угловыми.

<div id="post-stream"> 
    <h4>Chirp Feed</h4> 
    <div class="post" ng-repeat="post in posts.results | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"> 
     <button ng-click="delete(post)" ng-show="authenticated" class="btn btn-danger btn-xs pull-right remove">x</button> 
     <p>{{post.text}}</p> 
     <small>Posted by @{{post.created_by}}</small> 
     <small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small> 
    </div> 
</div> 

Я могу удалить записи в своей базе данных, но не могу понять, как удалить элемент, на который я нажимаю.

Answer 1

Насколько я могу видеть в вашем html-коде, у вас есть переменная $scope.posts.results.

нг-повтор дает в каждом элементе переменная $index, которую можно использовать для удаления элемента

добавить этот $index в ваш HTML:

ng-click="delete(post, $index)" 

И затем, в контроллер, удалите элемент из вашего массива

$scope.delete = function($posts, postIndex) {  
    $http.delete('/api/posts/' + $posts._id) 
      .success(function(data) { 
       $scope.posts.results.splice(postIndex, 1); 
      }); 

}; 

затем ng-repeat удалит ваш узел из DOM. Вам не нужно напрямую манипулировать DOM.

Answer 2

<button ng-click="delete(post)" ng-show="authenticated" class="btn btn- 

Это то, что я закончил делать.

$scope.delete = function($posts, postIndex) {  
     $http.delete('/api/posts/' + $posts._id) 
       .success(function(data) { 
       var index = $scope.posts.results.indexOf(data); 
        $scope.posts.results.splice(index, 1); 
       }); 

    };