Angularjs Updated table after clicking a link with parameters

Question

I am making an Single Page Application

My config:

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'
    })

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

Page loads on URL (for example) on http://127.0.0.1:8080/#/wines/delete/1 when the user clicks on delete. It deletes the record in my LocalStorage, but it does not 'refresh' my page like I would expect from my templateUrl in my config.

The user has to reload the page before the table shows the correct data. Any thoughts that could guide me to a solution?

score 1 · Answer 1 · answered Feb 18 '17 at 21:38

1

After deleting the record from the storage, you can assign updated array of objects to the array used in ng-repeat

$scope.remove = function(){

    $scope.winesFromStorage = updatedLocalStorageObject;

}

That way you wont have to reload the page and since its two way binded it will automatically reload the data part.

answered Feb 18 '17 at 21:38

Rahul Arora

4,503
1
16
24

This should work. But, my page loads on /wines/ with the tables and when pressed on delete it directs to /wines/delete/1. So it looks like it stays on /wines/ and it doesn't update the data. Any ideas? I like this idea better than the one above! – Bilzard Feb 18 '17 at 22:02

score 1 · Accepted Answer · edited May 23 '17 at 12:09

Do you want to remove the wine and redirect the user to another page or do you just want to remove the wine?

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

};

an example how to share data between controllers can be found here: Share data between AngularJS controllers

Angularjs Updated table after clicking a link with parameters

2 Answers2