延迟加载而不滚动

时间:2016-01-15 10:11:28

标签: angularjs lazy-loading

    <div class="table-responsive">
    <table class="table table-striped table-hover table-bordered table-condensed">
        <thead>
        <tr style="text-align: left!important;">
            <th width="4%"><a href="" ng-click="orderByField='number'; reverseSort = !reverseSort" class="PartAnchorHeader">Part#</a></th>
            <th width="5%"><a href="" ng-click="orderByField='description'; reverseSort = !reverseSort" class="PartAnchorHeader">Description</a></th>
            <th width="3.8%"><a href="" ng-click="showHideParts('Elemet')" class="PartAnchorHeader">{{title}}</a></th>
          </tr>
        </thead>
        <tbody>
        <tr ng-if="show" ng-repeat="item in dataElemet |orderBy:orderByField:reverseSort" class="PartData">
            <td>
                <div ng-if="item.isWarningIconShow == true"><img ng-src="../cim/images/projIcons/warning.png"/></div><span ng-bind="item.number"></span>
            </td>
            <td ng-bind="item.description"></td>
            <td ng-bind="item.Number"></td>
            <td ng-bind="item.prodCategory"></td>
           </tr>
           <tr ng-if="show" ng-repeat="item in dataElemet |orderBy:orderByField:reverseSort" class="PartData">
            <td>
                <div ng-if="item.isWarningIconShow == true"><img ng-src="../cim/images/projIcons/warning.png"/></div><span ng-bind="item.number"></span>
            </td>
            <td ng-bind="item.description"></td>
            <td ng-bind="item.prodCategory"></td>
            </tr>
            </tbody>
    </table>

     $scope.intializePartsData = function(objId, dataType){
        $scope.loading = true;
        $scope.dataElemet = null;
        $scope.dataElemet2 = null;
        if($scope.show == true && $scope.title == "Show Non Prod"){
            objectService.getParts(objId).then(function(parts){
                if(dataType == "Elemet") {
                    $scope.dataElemet = parts.data;
                    $scope.partsOriginalElemet = angular.copy($scope.dataElemet);
                } else {
                    $scope.dataElemet2 = parts.data;
                    $scope.partsOriginalElemet2 = angular.copy($scope.dataElemet2);
                }
            });
        } else {
            objectService.getPartsProduction(objId).then(function(parts){
                if(dataType == "Elemet") {
                    $scope.dataElemet = parts.data;
                    $scope.partsOriginalElemet = angular.copy($scope.dataElemet);
                } else {
                    $scope.dataElemet2 = parts.data;
                    $scope.partsOriginalElemet2 = angular.copy($scope.dataElemet2);
                }
            });
        }
        $scope.loading = false;
    }

     $scope.showHideParts = function(dataType){
        $scope.intializePartsData($scope.objId, dataType);
        if($scope.show == true && $scope.title == "Show Non Prod"){
               $scope.title = "Hide Non Prod";
               $scope.show = false;
           }else{
               $scope.title = "Show Non Prod";
               $scope.show = true;
           }

    }

这是我的代码,它的工作正常。但是当有更多数据需要时间时。所以我想实现延迟加载,但由于客户端对滚动不感兴趣,我需要在没有滚动的情况下进行延迟加载。是否可以在没有任何用户事件的情况下在angularjs中进行延迟加载。

0 个答案:

没有答案