2017-02-18 19 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:

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

的URL页面负载(例如)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; 

} 

这样,你不会有重新加载页面,因为它的双向绑定它会自动重新加载数据部分。

+0

这应该工作。但是,我的页面加载/葡萄酒/与表,当按下删除它指向/葡萄酒/删除/ 1。所以它看起来像它保持/葡萄酒/并且它不更新数据。有任何想法吗? 我喜欢这个想法比上面的更好! – Bilzard