如何刪除DOM中的角生成元素

我已經跑到牆上了。這是我的mainController的刪除功能。如何刪除DOM中的角生成元素

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

我可以刪除我的數據庫中的帖子，但我無法弄清楚如何刪除我點擊的元素。

來源

2016-01-05 ken

你只想從post.results集合中刪除帖子。這會自動從dom中刪除它。 – mcgraphix

如果你試圖直接操縱dom，你通常會在角度上做錯誤的事情。 – Etse

這就是它現在所做的，但我將不得不重新加載頁面以查看更改。我想在點擊時刪除元素。 – ken

據我可以在你的html代碼中看到，你有一個變量$scope.posts.results。

NG重複給你每個元素的變量$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。

來源

2016-01-05 22:14:03

真棒!!!!有效。我必須等3分鐘才能檢查您的解決方案。謝謝！ – ken

也謝謝你，我不知道'ng-class-odd =''odd'「'。 –

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

    };

來源

2016-01-12 20:40:58 ken

如何刪除DOM中的角生成元素

回答

相關問題