Question

您好我正在学习AngularJS，我有一个问题。我想在按钮点击上显示一个表格。单击该按钮时，将获取JSON数据，但我必须按两次按钮才能显示数据。

这是HTML页面。

<html>
  <body>
    <div class="container">
      <label for="tags" style="margin-top: 30px;margin-left: 15px;">GSTIN </label>
      <input id="tags">
        <button ng-click="searchfunction()">search</button>
    </div>
    <br/>
    <hr>
    <div class="container">
      <div ng-show="tshow"  ng-repeat="x in searchdata">
        <table class="table table-bordered table-responsive">
          <thead>
            <tr>
              <th>MON</th>
              <th>SGST</th>
              <th>CGST</th>
              <th>IGST</th>
              <th>CESS</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="i in x">
              <td>{{i.mon}}</td>
              <td>{{i.sgst}}</td>
              <td>{{i.cgst}}</td>
              <td>{{i.igst}}</td>
              <td>{{i.cess}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

这是控制器：

app.controller("searchcontroller", function ($scope,$http) {
  $scope.tshow=false;
  function make_base_auth(user, password) {
    var tok = user + ':' + password;
    var hash = btoa(tok);
    return "Basic " + hash;
  }

  $scope.searchfunction=function() {
    $scope.tshow=true;
    var tf=document.getElementById("tags");
    var value=tf.value;
    var auth = make_base_auth("gstadmn112","Gstn@123");
    var url6 = "http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718";
    xml = new XMLHttpRequest();
    // jQuery
    $.ajax({
      url : url6,
      method : 'GET',
      beforeSend : function(req) {
        req.setRequestHeader('Authorization', auth);
      },
      success:function(response) {
        console.log(response);
        scope.searchdata=response;
      },
      failure:function() {
        window.alert("wrong input data doesn't exist");
      }
    });
  }
});

我需要在搜索按钮上单击两次才能显示该表。我希望最初隐藏表，一旦搜索成功，就应该显示表。该表最初是隐藏的，点击两次后会显示正确的数据。

Answer 1

此问题与angular {s的digest loop有关，它会使您的视图和控制器之间的所有更改保持同步。

当你调用searchfunction()时，angularjs会知道方法内部发生了什么，并在完成时同步视图所做的更改。问题是你的方法使用$ .ajax，它有一些异步回调方法。当这些方法被调用时，angularjs已经离开了聚会（摘要循环结束）并且不知道这些方法对你的控制器$ scope做了什么。然而，jQuery成功回调将设置$scope.searchdata=response;，并且下次angularjs在聚会中时（下次单击时）会通知此更改。

所以基本上你需要确保angularjs知道对你的$ scope进行更改的异步方法。为了解决这个问题，我会注入angularjs自己的$http service（它负责对范围进行异步更改）并使用它。

var req = {
 method: 'GET',
 url: url6,
 headers: {
   'Authorization': auth
 }
}
$http(req).then(function(response){
    console.log(response);
    $scope.searchdata=response;
}, function(){
    window.alert("wrong input data doesn't exist");
});

Answer 2

也许，您尝试在功能$scope.tshow=true;中添加success：

success:function(response) {
        console.log(response);
        $scope.tshow=true;
        $scope.searchdata=response;
      },

P.S。我建议使用$http代替$ajax。

Answer 3

你可以这样使用。

$scope.searchfunction=function(){
$scope.tshow=true;
var tf=document.getElementById("tags");
var value=tf.value;

$http.get("http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718")
.success(function(result) {
     $scope.searchdata=response;
     $scope.tshow=false;
})
.error(function() {
     window.alert("wrong input data doesn't exist");
 });                 
}

在AngularJS中单击按钮时未显示表

3 个答案: