gpt4 book ai didi

javascript - 在 Angularjs 中单击按钮捕获行数据

转载 作者:行者123 更新时间:2023-12-01 05:27:43 25 4
gpt4 key购买 nike

我正在开发一个应用程序,该应用程序将允许最终用户从下拉列表中运行查询并显示数据表。在表中,每一行都有一个按钮。如果最终用户单击该按钮,我需要在编程中捕获该行的值以供稍后使用。

我似乎无法让它在我现有的应用程序中工作。我是 Angular 新手,看来这可能是问题所在,因为当我将代码复制到 fiddle 中而不应用 Angular 时,我能够很容易地完成此任务(见下文)。

https://jsfiddle.net/auLczhv7/

这是我的代码(其 REST 端点是 SharePoint 列表):

        var spApp = angular.module('spApp', []);
spApp.controller('spListCtrl', function ($scope, $http) {
$scope.clickButton = function(){
var storeNum = $("#storeNum").val();
$http(
{
method: "GET",
url: "https://mypage.com",
headers: { "Accept": "application/json;odata=verbose" }
}
).success(function(data){
$scope.MyData = data.d.results;

}).error(function (data, status, headers, config) {
});
}
$scope.disputeButton = function(){
var stNum = $(this).parent().siblings(":first-child").text();
alert(stNum);
}
});

还有我的 html:

    <body>
<div id="headerWrap">
<div id="headerText">My App</div>
</div>
<div ng-app="spApp" id="appWrap">
<div ng-controller="spListCtrl">
<div id="storeSearchWrap">
<span style="font-family:Arial, Helvetica, sans-serif;font-weight:bold">Store Number: </span><select id="storeNum">
<option value="" class="storeNumOpt"></option>
</select>
<button id="searchBtn" ng-click="clickButton()">Search</button>
<button id="printBtn" onclick="printWindow()">Print Report</button>
</div>
<div id="spinner" style="padding-top:50px;padding-bottom:50px">
<div id="txtWrap">
<p id="waitTxt">Loading...</p>
</div>
</div>

<p id="searchContainer">Filter: <input type="text" ng-model="search"></p>
<table width="100%" cellpadding="10" cellspacing="2" class="myTbl-table">
<thead>
<tr>
<th>Store Number</th>
<th>Date</th>
<th>Sub</th>
<th>Lot</th>
<th>Line</th>
<th>Sku</th>
<th>PO Number</th>
<th>Qty Received</th>
<th>Dispute Qty</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in MyData| filter : search">
<td>{{item.StoreNumber}}</td>
<td>{{item.Date}}</td>
<td>{{item.Sub}}</td>
<td>{{item.Lot}}</td>
<td>{{item.Line}}</td>
<td>{{item.Sku}}</td>
<td>{{item.PONumber}}</td>
<td>{{item.QtyReceived}}</td>
<td><button class="disputeBtn" ng-click="disputeButton()">Dispute</button></td>

</tr>
</tbody>
</table>
</div>
</div>
</body>

我做错了什么?有没有更简单的方法来以 Angular 实现这一点?

最佳答案

您应该只在单击事件上传递该项目,而不是尝试使用 jQuery 从单击的行中获取值。根据经验,在 Angular 应用程序中,如果您发现自己尝试使用 jQuery 从 DOM 读取值,那么您就“做错了什么”。几乎总是有一种“Angular 方式”来完成您想要做的事情。在这种情况下,我会将您的按钮更改为:

<button class="disputeBtn" ng-click="disputeButton(item)">Dispute</button>

然后将您的 disputeButton() 方法更改为:

$scope.disputeButton = function(item){
alert(item.StoreNumber);
}

关于javascript - 在 Angularjs 中单击按钮捕获行数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38999151/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com