捕獲按鈕上的行數據單擊Angularjs

我正在研究一個應用程序，該應用程序允許最終用戶從下拉列表中運行查詢並顯示數據表。在表格中，每行都有一個按鈕。如果最終用戶點擊按鈕，我需要在我的程序中捕獲該行的值以備後用。捕獲按鈕上的行數據單擊Angularjs

我似乎無法讓我的現有應用程序中工作。我是新來的角，看來這可能是問題，因爲我能夠完成這個足夠簡單的事情，當我將我的代碼複製到小提琴沒有角應用（見下文）。

這裏是我的代碼（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>

我在做什麼錯？有沒有更容易的方法來完成角度？

來源

2016-08-17 Nate

而不是試圖使用jQuery從單擊行中獲取值，你應該只是通過點擊事件的項目。作爲一個經驗法則，在Angular應用程序中，如果您發現自己試圖從jQuery中讀取數據，那麼您就會「做錯了什麼」。幾乎總是有一種「角度的方式」去做你想做的事情。在這種情況下，我會改變你的按鈕，這樣的：

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

，然後改變你的disputeButton()方法是：

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

來源

2016-08-17 14:18:51 Lex

真棒，那工作！由於我傾向於迴歸到jQuery，因此我會牢記這一點，因爲這是我熟悉的。謝謝！ – Nate

捕獲按鈕上的行數據單擊Angularjs

回答

相關問題