angularjs中的数据表不起作用

Question

我正在使用角度数据表来显示来自 http 请求的响应 我会将请求发送到将与 SQL Server 数据库通信并给出响应的 Web API 它对于具有数据的响应工作正常，但对于空响应，UI 中显示的数据表正在显示上一个响应中的值

当响应为空时，谁能帮我提示“没有为给定请求插入记录”？

Angular JS:
    $scope.currentPage = 0; //current page
    $scope.entryLimit = 10;

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage <  ($scope.filteredItems/$scope.entryLimit) - 1) {
            $scope.currentPage++;
        }
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    $scope.filter = function() {
        $timeout(function() {
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };


    $scope.range = function (size,start, cu,elimit) {
        var ret = [];




        if( ($scope.filteredItems/$scope.entryLimit)  < elimit)
        {
            if(($scope.filteredItems/$scope.entryLimit) ==0)
            {
            elimit = 1;
            }
            else
            {
                elimit = Math.ceil($scope.filteredItems/$scope.entryLimit);

            }
        }
        var end = parseInt(cu)+parseInt(elimit);

        console.log(size,start, end);

        if (size < end) {
            end = size;
            start = 0;
        }
        for (var i = start; i < end; i++) {
            ret.push(i);
        }
        console.log(ret);

        return ret;

    };


HTML:
 <div ng-show="filteredItems > 0">
    <div class="col-md-2">PageSize:
        <select ng-model="entryLimit" class="form-control">
            <option>10</option>
            <option>20</option>
            <option>50</option>
            <option>100</option>
        </select>
    </div>
    <div class="col-md-3">Filter:
        <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
    </div>
    <div class="col-md-4">
        <h5>Filtered {{ filtered.length }} of {{ totalItems}} total </h5>
    </div>
    </div>
       <div>
    <div class="col-md-12" ng-show="filteredItems > 0" >

        <br/>
        <br/>

    <table class="table table-bordered table-striped table-hover " style=" outline: 1px solid orange;"  >

        <thead>
        <tr>

                <th ng-repeat="(key,value) in items[0]"  ng-click="sort_by(key);" >{{key}}</th>
        </tr>


        </thead>
        <tbody>
        <tr ng-repeat="items in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">
          <td ng-repeat="(key,value) in items" >  {{value}}  </td>

        </tr>


        </tbody>

    </table>
               </div>
    <div class="col-md-12" ng-show="filteredItems == 0">
           <div class="col-md-12">
               <h4>No details found</h4>
           </div>
       </div>
    <div class="col-md-12"   ng-show="filteredItems > 0 ">

        <div colspan="6">
            <div class="pagination pull-right">
                <ul>
                    <li ng-class="{disabled: currentPage == 0}">
                        <a href ng-click="prevPage()">« Prev</a>
                    </li>

                    <li ng-repeat="n in range(filteredItems, currentPage, currentPage , 5) "
                        ng-class="{active: n == currentPage}"
                        ng-click="setPage()">
                        <a href ng-bind="n + 1">1</a>
                    </li>

                    <li ng-class="{disabled: (currentPage) == filteredItems - 1}">
                        <a href ng-click="nextPage()">Next »</a>
                    </li>
                </ul>
            </div>
        </div>


    </div>

    </div>

我的 Http 响应将在 $scope.items 中重新发送。

谢谢

Answer 1

看起来您将 API 调用的响应保留在 $scope 中的时间可能比需要的时间长。

在调用 API 之前销毁并刷新 $scope 中的模型对象，以便 $scope 仅包含来自新响应的对象。

例如。

    stories.destory()

在你的控制器中，说出你的模型

$scope.items.destroy();
// API call to receive results form server,
// now check if you received items response from server, if not display the message to the user.

谢谢， 保罗

Answer 2

尝试在填充表格之前验证响应... 像

    if(response!== null){
    $scope.items={};
    return;
    }
    else{
    $scope.items=response;
    }