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

Question

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

我似乎无法在现有应用程序中使用它。 我对angular并不陌生，似乎这可能是个问题，因为当我将代码复制到小提琴中而没有应用angular时，我能够很容易地做到这一点（请参阅下文）。

这是我的代码（此的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>

我究竟做错了什么？ 有没有更简单的方法可以做到这一点？

Answer 1

与其尝试使用jQuery从单击的行中获取值，不如将其传递给click事件。 根据经验，在Angular应用程序中，如果您发现自己尝试使用jQuery从DOM读取值，则说明您“做错了什么”。 几乎总是有一种“成角度的方式”来做您想做的事情。 在这种情况下，我会将您的按钮更改为：

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

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-17 14:18:51

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-17 14:18:51

解决方案1
0 已采纳 2016-08-17 14:18:51