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。

ng-repeat为每个元素提供了一个可用于删除元素的变量$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);
              });

    };

如何删除DOM中的角度生成元素

2 个答案: