Question

我正在尝试使用角度服务删除表格行，但不幸的是我不知道该怎么做。我必须使用服务，因为我使用具有相同控件的多个服务。

    <script>
    var myApp = angular.module("myApp", []);

    myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) {
        var allSettings = null;
        this.getList = function () {
            var def = $q.defer()
            if (allSettings) {
                def.resolve(allSettings);
            } else {
                $http.post('GetAllCurrentSettings')
                  .then(function (response) {
                      var response = $.parseJSON(response.data)
                      allSettings = response;
                      def.resolve(allSettings);
                  });
            }
            return def.promise;
        }
    }]);


    myApp.controller('myController', ['$scope', 'allCurrentSettingsService',
         function ($scope, allCurrentSettingsService) {

             $scope.allSettings = '';
             allCurrentSettingsService.getList().then(function (value) {
                 $scope.allSettings = value;
             });
         }
    ]);

    </script>'

这是我的HTML：

`

    <div ng-controller="myController">
        <table border="1">
                <tr ng-repeat="setting in allSettings">
                    <td><input id="Button1" type="button" value="Delete" data-ng-click="DeleteRow(rowValue)" /></td>
                    <td class="hidden">{{setting.SettingID}}</td>
                    <td>{{setting.CompanyName}}</td>
                    <td>{{setting.CustomerName}}</td>
                    <td>{{setting.DocumentName}}</td>
                </tr>
        </table>
    </div>

`

从控制器删除方法：

    [HttpPost]
    public static void DeleteRecord(int settingID)
    {
        try
        {
            using (SqlConnection conn = new SqlConnection(connStringApps))
            {
                conn.Open();
                using (SqlCommand command = new SqlCommand("DeleteCurrentRecord", conn))
                {
                    command.CommandType = System.Data.CommandType.StoredProcedure;
                    command.Parameters.Add("@SettingId", SqlDbType.VarChar).Value = settingID;
                    command.ExecuteNonQuery();
                    command.Parameters.Clear();
                }
                conn.Close();
            }
        }
        catch (Exception ex)
        {
            Console.Write(ex.ToString());
        }

    }

Answer 1

如果要删除，请从前端获取要删除的设置索引，然后使用拼接。

在html中必须有一个启动删除操作的按钮

你的html应该是一个粗略的想法

您的控制器＆gt;＆gt;

<tr ng-repeat ="setting in allSettings">
    <td>{{setting.SettingID}}</td>
    <!-- other items which you wnted to display-->
    <!-- put one button for delete and use $index to track the index of item to be removed-->
   <td><button ng-click="removeRow($index)">Remove Row</button></td>

</tr>

FYI

您无需使用服务，删除部分必须在控制器中完成。如果您需要点击删除设置的后端服务（发布或删除请求），则需要使用角度服务

Answer 2

答案已更新

我不建议从您的服务中删除一行，如果您从控制器执行此操作会更好，但是要弄清楚如何从服务中删除一行，请参阅示例。

要从控制器中删除，您只需将服务代码转换为控制器，就像您在示例中看到的那样。

var app = angular.module("app", []);

        app.controller("ctrl", function ($scope, service) {

            $scope.data = [
                { name: "a" },
                { name: "b" }
            ];

            $scope.deleteRow = function (row) {
                $scope.data = service.removeRow(row, $scope.data);
            }
            
            $scope.deleteFromController = function (row) {
                var indexOf = $scope.data.indexOf(row);
                $scope.data.splice(indexOf, 1);
            }

        });

        app.service("service", function ($rootScope) {
            this.removeRow = function (row, data) {
                var indexOf = data.indexOf(row);
                data.splice(indexOf, 1);
                return data;
            }

        });

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
</head>
<body>
    <h5>click on rows: delete from service</h5>
    <table>
        <tr ng-repeat="row in data" ng-click="deleteRow(row)">
            <td>{{row.name}}</td>
        </tr>
    </table>

    <h5>click on rows: delete from controller</h5>
    <table>
        <tr ng-repeat="row in data" ng-click="deleteFromController(row)">
            <td>{{row.name}}</td>
        </tr>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</body>
</html>

使用角度服务

2 个答案: