Capturing Row Data On Button Click in Angularjs
Question
I'm working on an application which will allow the end user to run a query from a drop down and be presented with a table of data. Within the table, each row will have a button. If the end user clicks the button, I need to capture the values of that row within my programming for use later on.
I can't seem to get this to work within my existing application. I'm new to angular and it appears that that this may be the issue as I'm able to accomplish this easy enough when I copy my code into fiddle without angular applied (see below).
https://jsfiddle.net/auLczhv7/
Here's my code (the REST endpoint for this is a SharePoint list):
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);
}
});
And my 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>
What am I doing wrong? Is there an easier way to accomplish this in angular?
1 answers
solution1
0 ACCPTED 2016-08-17 14:18:51
Instead of trying to use jQuery to get the values from the row clicked, you should just pass the item on the click event. As a rule of thumb, in an Angular app if you find yourself trying to read values from the DOM with jQuery you're "doing something wrong". There is almost always an "Angular way" to do what you're trying to do. In this case I would change your button to this:
<button class="disputeBtn" ng-click="disputeButton(item)">Dispute</button>
And then change your disputeButton() method to this:
$scope.disputeButton = function(item){
alert(item.StoreNumber);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.