角度更新數據，無需刷新或加載頁面

Question

我正在實施心願單，我想刪除心願單中的內容，而無需刷新頁面以查看新數據。 這裏是我做過什麼：

wish.controller('wishCtrl',['$scope','$http','$cookies','$window',function($scope,$http,$cookies,$window) { 


    var user={}; 
    user.email = $cookies.get('cookieEmail'); 
    $http.get("http://localhost:3000/wishlist/"+user.email).success(function(data){ 
     $scope.wishController = data; 
     console.log(data); 
    }); 



     var delclick=0; 
     var newView =0; 

     $scope.delClick = function(title, des, subj) { 

     var wish = {}; 

     wish.user = $cookies.get('cookieEmail'); 
     wish.sub = subj; 
     wish.title = title; 
     wish.description=des; 

     console.log(wish.user); 
     console.log(wish.title); 
     console.log(wish.sub); 
     console.log(wish.description); 

     delclick=1; 

     if(delclick==1) 
      { 
       $http.post('http://localhost:3000/wishlistDel', wish).then() 
       //$scope.load(); 
       //$window.location.reload(); 
      } 

      } 

}]); 

正如你在我試圖$window.location.reload();註釋中看到，但它就像提神，因爲整個頁面再次上傳，而不是刪除一個項目 - 像display:none，有沒有辦法做到那？

編輯

 <div ng-repeat="wishlist in wishController.Themes" > 
       <h2 class="text-center">{{wishlist.title}}</h2> 
       <h2 class="text-center">{{wishlist.description}}</h2> 
       <img ng-src="{{wishlist.image}}" class="imgCenter"> 
       <button class="w3-btn w3-ripple" ng-click="delClick(wishlist.title, wishlist.description, wishlist.sub, $index)">click </button> 
     </div> 

更新

$http.post('http://localhost:3000/wishlistDel', wish).then(function() { 
    if(item.sub=='party'){ 
    var index = $scope.wishController.Party.indexOf(item); 
    console.log(index); 
    if(index !== -1){ 
    $scope.wishController.Party.splice(index,1); 
    } 
} 
    if(item.sub=='activity'){ 
    var index = $scope.wishController.Activity.indexOf(item); 
    console.log(index); 
    if(index !== -1){ 
    $scope.wishController.Activity.splice(index,1); 
    } 
} 
    if(item.sub=='theme'){ 
    var index = $scope.wishController.Themes.indexOf(item); 
    console.log(index); 
    if(index !== -1){ 
    $scope.wishController.Themes.splice(index,1); 
    } 
} 

}); 

}

Answer 1

一般來說，管理所有這些的最簡單方法是從視圖中將原始對象傳遞到您的delClick函數。如果任何過濾器在ng-repeat

這允許您使用簡單數組中的對象，該對象的索引要從刪除

使用$index從視圖依託也不安全。這也意味着你不需要重建新的對象發送到服務器

<div ng-repeat="wish in wishlist"> 
    {{wish.something}} 
    <button ng-click="delClick(wish)">Delete</button> 

在控制器

$scope.delClick = function(item){ 
    $http.delete("http://localhost:3000/wishlist/"+user.email +'/' + item.id).then(function(){ 
    var index = $scope.wishlist.indexOf(item); 
    if(index !== -1){ 
     $scope.wishlist.splice(index,1); 
    } 
    });  
}); 

Answer 2

好像你是$scope.wishController數據的收集。您需要專門更新此集合，並刪除已刪除的項目：

$http.post('http://localhost:3000/wishlistDel', wish); 
$scope.wishController.splice(indexOfDeletedItem, 1); 

由於要傳遞$index你想使用：

$scope.wishController.Themes.splice($index, 1); 

Answer 3

你需要傳遞模板$index的希望對ng-click移除它控制器，這樣的事情：

模板：

<a ng-click="delClick(title, des, subj, $index)">Delete {{wish.title}}</a> 

控制器上，你將需要改變你的函數接受這一點，從您的列表模式中刪除項目：如果你需要使用過濾器

// Here you'll need to receive the $index from template 
$scope.delClick = function(title, des, subj, index) { 

    // ... 

    if(delclick==1) { 
     $http.post('http://localhost:3000/wishlistDel', wish).then(function() { 
      // Here you'll use the same array of your 
      // ng-repeat instead $scope.list 
      $scope.list.splice(index, 1); 
     }); 
    } 

} 

編輯

，我建議像this或@charlietfl答案