AngularJS按钮点击需两次才显示表格问题求助

我一眼就看出了问题所在，主要有两个关键错误导致了这个怪异的行为，咱们一步步来修复：

问题根源 #

• 错误的作用域引用 + 脏检查未触发：在jQuery的$.ajax成功回调里，你写的是scope.searchdata=response——这里的scope根本没指向Angular的$scope；而且jQuery的回调运行在Angular的脏检查周期之外，就算改成$scope.searchdata，Angular也不会自动更新视图。
• 过早显示表格：你在点击按钮时立刻把$scope.tshow设为true，但此时请求还没完成，searchdata还是空的，首次点击时表格虽然显示了但没有数据；第二次点击时之前的请求刚好完成，searchdata有了值，所以才会正常显示。

修复方案 #

方案1：改用Angular原生$http（推荐） #

既然用了AngularJS，尽量用它自带的$http服务，它会自动处理脏检查，代码风格也更统一：

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() {
        var value = $scope.gstinValue; // 后续会用ng-model优化这里
        var auth = make_base_auth("gstadmn112","Gstn@123");
        var url6 = "http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718";
        
        $http({
            url: url6,
            method: 'GET',
            headers: {
                'Authorization': auth
            }
        }).then(function(response) {
            console.log(response.data);
            $scope.searchdata = response.data;
            $scope.tshow = true; // 只有请求成功后才显示表格
        }, function(error) {
            window.alert("Wrong input, data doesn't exist");
            $scope.tshow = false; // 请求失败时隐藏表格
        });
    }
});

方案2：如果坚持用jQuery的$.ajax #

需要手动触发Angular的脏检查，同时修正作用域引用：

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() {
        var value = document.getElementById("tags").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";
        
        $.ajax({
            url : url6,
            method : 'GET',
            beforeSend : function(req) {
                req.setRequestHeader('Authorization', auth);
            },
            success:function(response) {
                console.log(response);
                $scope.searchdata = response;
                $scope.tshow = true;
                $scope.$apply(); // 手动触发脏检查，让Angular更新视图
            },
            error:function() {
                window.alert("Wrong input, data doesn't exist");
                $scope.tshow = false;
                $scope.$apply();
            }
        });
    }
});

额外优化：用ng-model替代原生DOM操作 #

在HTML里给input加上ng-model，符合Angular数据绑定的思想，不用手动获取DOM元素：

<input id="tags" ng-model="gstinValue">

然后控制器里直接用$scope.gstinValue即可，避免原生DOM操作的潜在问题。

最终优化后的HTML代码 #

还帮你调整了ng-repeat的位置——原来的写法会生成多个表格，现在改成在表格行上循环，只会生成一个表格：

<html>
<body>
<div class="container">
<label for="tags" style="margin-top: 30px;margin-left: 15px;">GSTIN </label>
<input id="tags" ng-model="gstinValue">
<button ng-click="searchfunction()">search</button>
</div>
<br/>
<hr>
<div class="container">
<div ng-show="tshow">
<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 searchdata">
<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>

内容的提问来源于stack exchange，提问作者Amey Bhivshet