There is a table whose data is drawn from the server.

In each row of this table there is a button to delete this row (one entry in the table, or rather not an deletion, but an update)
So when I click the delete button, the request goes to the server that updates the field.

How to update view

[ { id: 11, name: 'csdacdcdc' }, { id: 12, name: 'dvSDSvbf' } ]

that is, after the update, now you need to display all data except the object with id: 11.
I wanted to know in Angulyar there is some kind of ready-made way, or do it manually
The data in the table output through ng-repeat

Markup

 <table class="table table-striped table-bordered table-tours"> <thead> <tr> <th>Номер</th> <th>Название</th> <th>Город</th> <th>Тип</th> <th>Дата начала</th> <th>Количество дней</th> <th>Опубликовано</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="tour in tours | filter: query"> <td ng-bind="$index+1"></td> <td><a ng-bind="tour.name" href="admin/tour/edit/{{tour.id}}"></a></td> <td ng-bind="tour.town.name"></td> <td ng-bind="tour.tours_type.name"></td> <td ng-bind="tour.date_start | date">Trident</td> <td>Trident</td> <td> <switcher class="styled" ng-model="tour.published" ng-disabled="isDisabled" ng-change="onChangePublish(newValue, oldValue, tour.id)" true-label="" false-label=""> </switcher> </td> <td><button class="btn btn-danger" ng-click="removeTour(tour.id)"> <i class="fa fa-trash"></i></button> </td> </tr> </tbody> </table>

Controller

 $scope.removeTour = function(tour_id){ $http({ url: "/tour/update-tour", method: "POST", data: { id: tour_id, removed: 1 } }).success(function (data) { $scope.init(); }).error(function (data, status, headers, config) { $scope.status = status; }); }
  • Add a minimal reproducible sample of the code that you have - Grundy
  • yes the matter is not in the code, but in the approach, the question is in fact that it is more logical, more correct - to go for the data to the server or update the existing model in the angular - ruslik
  • these are two unrelated actions: if you need to update on the server - you need to go to the server, if you need to update the view - you need to update the model for this view - Grundy
  • you don’t need to go to the server anymore, you just need to update the view - ruslik
  • in the comment above: if you need to update the view, you need to update the model for this view - Grundy

1 answer 1

To update the view, you need to change the model, in this case the array of tours. This can be done using the splice method, but for this you need to know the index of the element to be deleted in the array. If filtering was not used

 ng-repeat="tour in tours | filter: query"

it was possible to pass an index directly to the removeTour method

 ng-click="removeTour($index)"

and inside it remove the desired object, but since filtering is used, the indices in the filtered array will not match the indices in the original.

Thus, it is necessary to determine this index, for example, by passing the object itself and using the indexOf method indexOf

Example:

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.tours = [{ id: 11, name: 'csdacdcdc' }, { id: 12, name: 'dvSDSvbf' }, { id: 13, name: 'asdadasd' }, { id: 14, name: 'zxczxczxc' } ]; $scope.remove = function(item) { var index = $scope.tours.indexOf(item); $scope.tours.splice(index, 1); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <input type="text" ng-model="query" /> <div ng-repeat="t in tours|filter:query"> <pre>{{t | json}}</pre> {{$index}} <input type="button" ng-click="remove(t)" value="remove" /> </div> </div>

The second option may be to use the filter method, or $ filter , to remove an unnecessary element, for example

 $scope.tours = $scope.tours.filter(function(el){ return el.id != tour_id; }) $scope.tours = $filter('filter')($scope.tours, function(tour) { return tour.id != tour_id; }); 

 angular.module('app', []) .controller('ctrl', function($scope, $filter) { $scope.tours = [{ id: 11, name: 'csdacdcdc' }, { id: 12, name: 'dvSDSvbf' }, { id: 13, name: 'asdadasd' }, { id: 14, name: 'zxczxczxc' } ]; $scope.remove = function(tour_id) { $scope.tours = $filter('filter')($scope.tours, function(tour) { return tour.id != tour_id; }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <input type="text" ng-model="query" /> <div ng-repeat="t in tours|filter:query"> <pre>{{t | json}}</pre> {{$index}} <input type="button" ng-click="remove(t.id)" value="remove" /> </div> </div>