Question

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

我似乎无法在现有应用程序中使用它。我是角色的新手，看起来这可能是问题，因为当我将代码复制到没有应用角度的小提琴时，我可以很容易地实现这一点（见下文）。

这是我的代码（这是一个SharePoint列表的REST端点）：

        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中读取值，那么您“做错了”。几乎总有一种“角度方式”来做你想要做的事情。在这种情况下，我会将您的按钮更改为：

$(document).ready(function() {

  $.getJSON("https://api.dribbble.com/v1/shots/?access_token=TOKEN", function(data) {
    data.forEach(function(e){
      $('.dribbble-feed').append('<img src="' + e.images.normal + '" />');
    })
  });
});

然后将您的<button class="disputeBtn" ng-click="disputeButton(item)">Dispute</button>方法更改为：

disputeButton()

捕获按钮上的行数据单击Angularjs

1 个答案: