2017-02-18 2 views
0

私は単一ページのアプリケーションを作っていますとのリンクをクリックした後、テーブルを更新しましたAngularjsはパラメータ

マイ設定:

var app = angular.module('menuCardMaker', ['ngRoute']); 

app.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/wines', { 
     templateUrl: 'templates/wine/wine.html', 
     controller: 'WineController' 
    }) 
    .when('/wines/delete/:id', { 
     templateUrl: 'templates/wine/wine.html', 
     controller: 'WineController' 
    }) 

マイHTML:URLの

 <table> 
     <tr> 
      <td class="head">Name</td> 
     </tr> 
     <tr ng-repeat="wine in winesFromStorage"> 
      <td>{{ wine.name }}</td> 
      <td><a ng-href="#/wines/delete/{{ wine.id }}" ng-click="remove()">Delete</a></td> 
     </tr> 
    </table> 

ページの負荷(例えば)をhttp://127.0.0.1:8080/#/wines/delete/1に設定します。私のLocalStorageのレコードを削除しますが、私の設定でtemplateUrlから期待したように私のページを 'リフレッシュ'しません。

ユーザーは、表に正しいデータが表示される前にページをリロードする必要があります。私を解決策に導くことができる考え?

答えて

1

ワインを取り出して別のページにリダイレクトしたいのですか、ワインを削除したいだけですか?

.controller('WineController', ['$scope', '$location' function ($scope, location) { 
    $scope.wines = ['wine1', 'wine2]; 

    $scope.deleteWine = function(wineIndex){ 
     // this should update the ng repeat list on your page 
     delete $scope.wines[wineIndex]; 
     // if you still want to redirect the user you could do 
     // it like this: 
     $location.path('/yoururlhere'); 
     // of course this would load another route with another controller. 
     //If you want to share the current wine list between two 
     //controllers, you could create a wineListService where 
     //you store the list. 
    } 

}; 

コントローラ間でデータを共有する方法の例では、ここで見つけることができます: Share data between AngularJS controllers

1

ストレージからレコードを削除した後、あなたはNGリピート

$scope.remove = function(){ 

    $scope.winesFromStorage = updatedLocalStorageObject; 

} 

に使用される配列にオブジェクトの更新配列を割り当てることができますあなたが文句を言わないページをリロードする必要があるとその2つの方法であるため、それをバインドさその方法は、自動的にデータ部分をリロードします。

+0

これは動作するはずです。しかし、私のページは/ワイン/テーブルにロードされ、削除時に押されると/ wines/delete/1に送られます。だからそれは/ wine /にとどまり、データを更新しないようです。何か案は? 私はこのアイデアが上記のものよりも好きです! – Bilzard

関連する問題