2017-02-18 14 views
0

Я сделав однократное применение PageAngularjs Обновленный таблицу после нажатия на ссылку с параметрами

Мой конфиг:

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, но не обновляет мою страницу, как я ожидал бы от моего шаблона в моей конфигурации.

Пользователь должен перезагрузить страницу, пока таблица не покажет правильные данные. Любые мысли, которые могли бы привести меня к решению?

ответ

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

После удаления записей из хранилища, вы можете присвоить обновленный массив объектов в массив используется в нг-повторить

$scope.remove = function(){ 

    $scope.winesFromStorage = updatedLocalStorageObject; 

} 

Таким образом, вы не будете иметь, чтобы перезагрузить страницу и так как его два пути переплетены его будет автоматически перезагружать часть данных.

+0

Это должно работать. Но моя страница загружается/вины/с таблицами, а при нажатии на удаление она направляется в/wines/delete/1. Таким образом, похоже, что он остается включенным/винами/и он не обновляет данные. Есть идеи? Мне нравится эта идея лучше, чем выше! – Bilzard

 Смежные вопросы

  • Нет связанных вопросов^_^