Angularjs 单击带有参数的 link 后更新了 table

Question

我正在制作单页应用程序

我的配置：

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 中的记录，但它不会 'refresh' 我的页面，就像我期望从我的配置中的 templateUrl 中看到的那样。

在 table 显示正确数据之前，用户必须重新加载页面。有什么想法可以指导我找到解决方案吗？

Answer 1

从存储中删除记录后，您可以将更新后的对象数组分配给ng-repeat

中使用的数组

$scope.remove = function(){

    $scope.winesFromStorage = updatedLocalStorageObject;

}

这样你就不必重新加载页面，因为它是双向绑定的，所以它会自动重新加载数据部分。

Answer 2

您是要删除酒并将用户重定向到另一个页面，还是只想删除酒？

.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

Angularjs 单击带有参数的 link 后更新了 table

Angularjs Updated table after clicking a link with parameters

javascript

angularjs

single-page-application

ngroute