Erfassen von Row Data On Button Klicken Sie in Angularjs

Ich arbeite an einer Anwendung, die es dem Endbenutzer ermöglicht, eine Abfrage aus einem Dropdown auszuführen und eine Datentabelle angezeigt werden. Innerhalb der Tabelle hat jede Zeile eine Schaltfläche. Wenn der Endbenutzer auf die Schaltfläche klickt, muss ich die Werte dieser Zeile in meiner Programmierung für die spätere Verwendung erfassen.Erfassen von Row Data On Button Klicken Sie in Angularjs

Ich kann nicht scheinen, dass dies innerhalb meiner bestehenden Anwendung funktioniert. Ich bin neu in eckigen und es scheint, dass dies das Problem sein kann, da ich in der Lage, dies leicht genug zu erreichen, wenn ich meinen Code in Geige ohne eckige Anwendung kopieren (siehe unten).

https://jsfiddle.net/auLczhv7/

Hier mein Code ist (der REST-Endpunkt für diese ist eine Sharepoint-Liste):

 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); 
     } 
    });

Und mein 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>

Was mache ich falsch? Gibt es einen einfacheren Weg, dies in eckigen zu erreichen?

Quelle

2016-08-17 Nate

Anstatt zu versuchen, jQuery zu verwenden, um die Werte aus der angeklickten Zeile abzurufen, übergeben Sie einfach das Element für das click-Ereignis. Als Faustregel gilt, dass Sie in einer Angular-App, wenn Sie versuchen, Werte aus dem DOM mit jQuery zu lesen, etwas falsch machen. Es gibt fast immer einen "Winkelweg", um das zu tun, was Sie tun wollen.

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

Und dann disputeButton() Methode dies ändern: In diesem Fall würde ich Ihre Taste, um dies ändern

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

Quelle

2016-08-17 14:18:51 Lex

Awesome, das funktioniert! Ich werde das im Hinterkopf behalten, da ich dazu tendiere, zu jQuery zurückzukehren, da mir das vertraut ist. Vielen Dank! – Nate

Erfassen von Row Data On Button Klicken Sie in Angularjs

Antwort

Verwandte Themen