Question

我的项目中有平台列表，我想从平台列表中删除一个项目并查看更新列表而不重新加载平台列表图片：platform list image

我在我的项目中使用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

您可以使用array.splice()方法从阵列中删除数据。这个syntex是

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 2

此代码解决了您的问题：

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

});

Answer 3

$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;
    });
}`

如何从列表中删除项目并更新angularjs中的列表？

3 个答案: