ページをリフレッシュまたはロードせずに角度のデータを更新する

Question

私はウィッシュリストを実装しています。新しいデータを表示するためにページをリフレッシュせずにウィッシュリストからコンテンツを削除したいと思います。ここで は私がやったことです：あなたは、私が$window.location.reload();しようとしたコメントの中で見ることができますが、ページ全体ではなく一つの項目を削除すると、再びアップロードされているので、それはさわやかようなものだとして

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

      } 

}]); 

から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上にあるように思えます。あなたは$indexに渡しているので、使用したい

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

：あなたは、特にこのコレクションを更新し、削除された項目を削除する必要が

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

} 

EDIT

：コントローラで

、あなたはこれを受け取るためにあなたの関数を変更し、あなたのリストのモデルから項目を削除する必要がありますthisまたは@charlietflの回答