在AngularJS中使用AJAX点击按钮删除XML记录答案

【问题标题】：Delete XML record on the click of button using AJAX in AngularJS在AngularJS中使用AJAX点击按钮删除XML记录
【发布时间】：2015-12-28 08:25:58
【问题描述】：

您好，我正在尝试从使用 AngularJS 以表格形式显示数据的 XML 文件中删除记录，我的代码是：

XML 文件

<UserDetail>
  <Detail>
    <EmployeeID>124578</EmployeeID>
    <EmployeeName>suresh</EmployeeName>
    <EmailID>suresh@xyz.com</EmailID>
  </Detail>
  <Detail>
    <EmployeeID>587458</EmployeeID>
    <EmployeeName>Namit</EmployeeName>
    <EmailID>Namit@xyz.com</EmailID>
  </Detail>
</UserDetail>

这是我的 AngularJS 代码，我可以将 XML 更改为 JSON 并以表格的形式呈现

<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http.get('myDB.xml')
            .then(function (response) {
                var x2js = new X2JS();
                $scope.details = [];
                var data = x2js.xml_str2json(response.data);
                $scope.details = data.UserDetail.Detail;
                $scope.getID = function (id) {                 
                    var index = 0
                    $scope.details.splice(index, 1);
                }
            });

        });
      </script>

HTML 代码，我的数据以表格形式出现

<div ng-app="myApp" ng-controller="myCtrl">
            <table border="1" width="100%">
                <tr>
                    <th>Employee ID</th>
                    <th>Employee Name</th>
                    <th>Email ID</th>
                    <th>Status</th>
                </tr>
                <tr ng-repeat="detail in details" align="center">
                    <td>{{detail.EmployeeID}}</td>
                    <td>{{detail.EmployeeName}}</td>
                    <td>{{detail.EmailID}}</td>
                    <td>
                        <button ng-click="getID(detail.EmployeeID)" class="btnDelete">Delete Request</button>
                    </td>
                </tr>
            </table>
        </div>

请帮助我在 angularJS 中使用 ajax 单击按钮删除记录表单 XML 文件

【问题讨论】：

你为什么不在服务器端做呢？或者更好地调用响应为 json 的脚本。
@Jai 我尝试使用 ASP.net 但我无法使用该按钮引用 id 可以知道我要删除的记录查看我的代码 protected void btnDelete_Click(object sender, EventArgs e) { string id = ""; var xDoc = XDocument.Load(@"D:\test\myDB.xml"); xDoc.Descendants("Detail") .Elements("EmployeeID") .Where(x => x.Value == id) .Remove(); xDoc.Save(@"path.xml"); }

标签： javascript jquery angularjs ajax xml

【解决方案1】：

您可能需要转换xml to json again，然后删除该对象。

{
  "UserDetail": {
    "Detail": [
      {
        "EmployeeID": "124578",
        "EmployeeName": "suresh",
        "EmailID": "suresh@xyz.com"
      },
      {
        "EmployeeID": "587458",
        "EmployeeName": "Namit",
        "EmailID": "Namit@xyz.com"
      }
    ]
  }
}

$scope.getID = function (emp) {                 
   var jsondata = x2js.xml_str2json(xml); //Its an array of object hopefully
   var index = jsondata.map(function(item) { return item.id; })
                   .indexOf(emp.EmployeeID);

   jsondata.splice(removeIndex, 1); // your json here... 
            which you can convert it back to xml and update. 
}

【讨论】：