javascript - 单击 ng-repeat 中的按钮时会给出错误的警报值

Question

嗨，下面是我的代码，使用 AngularJS 以 HTML 表格的形式呈现 XML 数据，其中每次重新编码都会生成一个名为“删除请求”的按钮

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>Device 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()" class="btnDelete">Delete Request</button>
                    </td>
                </tr>
            </table>
        </div>

HTML 表格中的 XML 数据

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

AngularJS 代码:

<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 () {
                    var myID = $(".btnDelete").closest('tr').children('td').eq(0).text();
                    alert(myID);
                }
            });

        });
      </script>

现在的问题是我面临的问题是，即使我单击第二个记录按钮，它在单击按钮时仅给出第一条记录(员工 ID)，但它仍然在我的警报中给出第一条记录(员工 ID)值。所以请帮助我该怎么办，它在警报中给出了相应的记录值。

Answer 1

您只需在 getID(detail.EmployeeID) 中传递 emp id，无需使用 jquery 选择器来获取 emp id。

html

<button ng-click="getID(detail.EmployeeID)" class="btnDelete">Delete Request</button>

js

 $scope.getID = function(myID) {
   console.log(myID); // you can get current clicked emp id 
 }

<强> DEMO