从列表中删除项目 angular

Question

我已经习惯了普通的 MVC 服务器端编码，现在我正在努力学习 angular。我想制作一个用户界面，人们可以在其中将团队添加到他们登录的比赛中。要从我正在使用的列表中删除团队：

angular.module('Xtho.InschrijfController', [])
.controller("InschrCtrl", [
    '$scope', '$http', function ($scope, $http) {
        $scope.model = {};
        $scope.wedstrijden = {};
        $scope.states = {

        };

        $scope.new = {
            ploeg: {}
        };

        $http.get('/inschrijvingen/IndexVM').then(function (data) {
            $scope.model = data;
        });

        $scope.Vploeg = function (id, index) {
            $http.post('/inschrijvingen/PloegVerwijderen', { id: id }).then(function (response) {
                $scope.model.splice(index, 1);
            });
        };

    }
]);

这是在视图中：

<p>{{ploegen.PloegNaam}} <a href="#" ng-click="Vploeg(ploegen.PloegID, $index)"><span class="fa fa-trash-o" aria-hidden="true"></span></a></p>

代码有效！但是，由于记录已从数据库中删除，它们仍在页面上显示的列表中。控制台提供以下错误："n.model.splice is not a function"，解决此问题的最佳方法是什么？

Answer 1

像这样。

angular.module('Xtho.InschrijfController', [])
.controller("InschrCtrl", [
'$scope', '$http', function ($scope, $http) {
    $scope.model = {};
    $scope.wedstrijden = {};
    $scope.states = {

    };

    $scope.new = {
        ploeg: {}
    };

    $scope.load = function(){
        $http.get('/inschrijvingen/IndexVM').then(function (data) {
            $scope.model = data;
        });
    };
    $scope.load();

    $scope.Vploeg = function (id, index) {
        $http.post('/inschrijvingen/PloegVerwijderen', { id: id 
    }).then(function (response) {
            //$scope.model.splice(index, 1);
            $scope.load();
        });
    };

}
]);

Answer 2

$scope.model=[]//list
$scope.model={}//javascript object

使用$scope.model=[]

Answer 3

在这一行中，您正试图删除 $scope.model 变量的一个元素：

$scope.model.splice(index, 1);

我们只能对数组使用 splice()，但看起来 $scope.model 不是数组，它在您的代码中被声明为对象：

$scope.model = {};

我真的不知道 $scope.model 是什么类型，当你试图从中拼接一个元素时。如果它是一个对象，你最好通过 id 删除元素：

$scope.Vploeg = function (id, index) {
  $scope.idForRemove = id;
  $http.post('/inschrijvingen/PloegVerwijderen', { id: id })
    .then(function (response) {
      delete $scope.model[$scope.idForRemove];
    });
  }
}

从列表中删除项目 angular

Remove item from list angular

angularjs

splice