在数据从服务器到达后更新ng-grid UI



我在angularjs中使用ng-grid。

当我第一次加载数据时(当控制器正在加载时),数据到达。但是,当我尝试在单击按钮后刷新数据时,数据在UI中没有变化,但我在调试模式中看到范围中的数据发生了变化。

我忘了什么吗?

我的HTML

:

<div ng-controller="PurchaseOrderController">
    <div class="gridStyle"  ng-grid="gridOptions"></div>
    <input name="" type="button" value="search" class="search_button" ng-click="SearchOrders();"></div>

控制器:

        $scope.SearchOrders = function () {
        if (!$scope.DateFrom) {
            $scope.p1= "a";
        }
        if (!$scope.DateTo) {
            $scope.p2= "b";
        }
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);


    }//END OF SEARCH ORDERS
       $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5, 10, 20],
        pageSize: 10,
        currentPage: 5
    };
    $scope.setPagingData = function (data, page, pageSize) {
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.OrderData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
        $scope.$apply();
    };
    //END OF SERVER SIDE

    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            OrderService.SearchOrders($scope.p1.Val, $scope.p2,
                $scope.SelectedOrder, $scope.SelectedPlant.Val, $scope.DateFrom, $scope.p3, $scope.p4).success(
                function (data) {
                    $scope.setPagingData(data, page, pageSize);
                });
            //$scope.setPagingData(data, page, pageSize); NEED TO BE RETURNED TO HTTP GET
        }, 100); //SET TIMEOUT
    };//END OF FUNCTION GET PAGED DATA
$scope.gridOptions = {
      data : 'OrderData',
           ...
}

最新更新