как удалить элемент из списка и обновить список в angularjs?

Question

У меня есть список платформ в моем проекте, я хочу удалить один элемент из списка платформ и увидеть список обновлений без перезагрузки изображения списка платформ: Изображение списка платформ

Я использую ui-route вмой проект

тело platform-list.html:

<tbody>
        <tr ng-repeat="platform in platforms">
            <td>{{platform.PlatformID}}</td>
            <td>{{platform.Name}}</td>
            <td><button ui-sref="platform-edit({id: platform.PlatformID})" class="btn btn-warning">Edit&nbsp;<span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>&nbsp;|&nbsp;
            <button ng-click="remove(platform.PlatformID)"  class="btn btn-danger">Delete&nbsp;<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>
        </tr>
</tbody>

platform-list-controller.js:

mainApp.controller('platformListController', function ($scope, platform, $filter) {
  platform.query().$promise.then(function (data) {
    $scope.platforms = data;
  }, function (error) {
  });    
});

модель платформы:

public class Platform
{        
    [Key]
    public int PlatformID { get; set; }    
    public string Name { get; set; }
}

как написать код удаления в этом контроллере?

Answer 1

Каковы свойства $scope.platforms?Вероятно, самым простым (не самым эффективным) является добавление атрибута ng-click.

С точки зрения кода это будет HTML-код для кнопки Удалить:

`<btn ng-model="delBtn" ng-click="deletePlatform(platform.id)">
    <span>Delete</span>
</btn>`

ифункция в контроллере или директиве будет:

`function deletePlatform(platform.id) {
    $scope.platforms.filter(function (platformItem) {
        return platformItem.id !== platform.id;
    });
}`

Answer 2

Вы можете использовать метод array.splice() для удаления данных из массива.Этот синтаксис

array.splice(index , howMany[, element1[, ...[, elementN]]])

В вашем контроллере

mainApp.controller('platformListController', function ($scope, platform, $filter) {

  $scope.platforms = [];

  platform.query().$promise.then(function (data) {
    $scope.platforms = data;
  }, function (error) {
  });

$scope.remove = function(platformId, index){
    $scope.platforms.splice(index,1);
}

});

и ваш HTML должен выглядеть следующим образом:

<tbody>
        <tr ng-repeat="platform in platforms">
            <td>{{platform.PlatformID}}</td>
            <td>{{platform.Name}}</td>
            <td><button ui-sref="platform-edit({id: platform.PlatformID})" class="btn btn-warning">Edit&nbsp;<span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>&nbsp;|&nbsp;
            <button ng-click="remove(platform.PlatformID, $index)"  class="btn btn-danger">Delete&nbsp;<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>
        </tr>
</tbody>

Answer 3

этот код решит вашу проблему:

mainApp.controller('platformListController', function ($scope, platform, $filter) {    
platform.query().$promise.then(function (data) {
    $scope.platforms = data;
}, function (error) {
});

//add this code 
$scope.remove = function (id) {
    platform.remove({ id: id }).$promise.then(function () {
        $scope.platforms = $filter('filter')($scope.platforms, function (item) {
            return item.PlatformID !== id;
        });
        alert('Removed');
    }, function (error) {
        alert('Failed');
    });
};
//

});